@font-face {
    font-family: 'BBC_sm';
    src: url('../assets/fonts/bbcreithsans_rg-webfont.woff2') format('woff2'), url('../assets/fonts/bbcreithsans_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BBC_md';
    src: url('../assets/fonts/bbcreithsans_md-webfont.woff2') format('woff2'), url('../assets/fonts/bbcreithsans_md-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*@font-face {
    font-family: 'BBC_md';
    src: url('../assets/fonts/BBCReithSans-Medium.woff2') format('woff2'), url('../assets/fonts/BBCReithSans-Medium.woff') format('woff'), url('../assets/fonts/BBCReithSans-Medium.svg#BBCReithSans-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}*/

img[image-map] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}

body {
    margin: 0px;
    padding: 0;
    overflow-x: hidden;
}

.page1 {}

* {
    font-family: 'BBC_sm';
}


/*.btn_gredi:before{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    border: 2px solid #fff;
}*/

.modal-backdrop.show {
    opacity: .6;
}

.page1 #transcriptModal .screenBg.showForDesktop {
    width: auto;
}

.pageContainer {
    background-size: contain;
    background-position: center;
}

.modal .modal-content {
    background: transparent;
    border: none;
}

.modal .modal-closeBTN span {
    color: #fff;
    font-size: 2.3em;
    line-height: 60px;
    opacity: 1;
}

.modal .modal-closeBTN {
    position: absolute;
    right: 5%;
    top: 0%;
    z-index: 101;
}

.modal .modal-closeBTN .close {
    padding: 0px;
    opacity: 1;
    color: transparent;
    text-shadow: none;
}

.page1 #modal1 .popupData h2 {
    font-size: 1.5rem;
    padding: 2vh;
    line-height: revert;
}

.page1 #modal1 .modal-dialog {
    max-width: 100vh !important;
}

.page2 {
    margin-left: 7.5%;
    margin-right: 7.5%;
    background-repeat: no-repeat;
    padding-top: 5%;
    width: 85%;
    position: relative;
    display: grid;
}

.pd25_b10 {
    padding: 25px 0 10px
}

.container-fluid {
    padding: 0
}

.menuBtn.open {
    right: 6%;
    display: none !important;
}

.menuBtn {
    position: absolute;
    right: 2.5%;
    top: 5px;
    z-index: 999;
    cursor: pointer;
    width: 48px;
    padding-top: 20px;
    height: 50px;
	
}

.MenuSection .menuBtn.open {
    right: 3%;
    display: block!important;
}

.menuBtn span {
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    float: left;
    margin: 2px;
}

.menuBtn.open {
    padding: 0
}

.menuBtn.open span {
    height: 5px;
    width: 32px;
    border-radius: 5px;
    display: block;
    margin: 10px auto;
}

.menuBtn.open span:first-child {
    -webkit-transform: translateY(10px) rotateZ(45deg);
    -moz-transform: translateY(10px) rotateZ(45deg);
    -ms-transform: translateY(10px) rotateZ(45deg);
    -o-transform: translateY(10px) rotateZ(45deg);
    transform: translateY(10px) rotateZ(45deg);
}

.menuBtn.open span:nth-child(2) {
    display: none;
}

.menuBtn.open span:nth-child(3) {
    -webkit-transform: translateY(-15px) rotateZ(-45deg);
    -moz-transform: translateY(-15px) rotateZ(-45deg);
    -ms-transform: translateY(-15px) rotateZ(-45deg);
    -o-transform: translateY(-15px) rotateZ(-45deg);
    transform: translateY(-15px) rotateZ(-45deg);
}

.page12 .headingBg {
    padding: 1% 4% 0.5% 4%;
    width: auto;
}

.headingBg {
    clip-path: polygon(2% 8%, 98% 3%, 100% 100%, 0% 100%);
    background: #eae833;
    -ms-transform: rotate(-1deg);
    /* IE 9 */
    transform: rotate(-1deg);
    display: inline-block;
    z-index: 999;
    position: relative;
    padding: 1% 2% 0.5%;
    width: 25%;
}

.mt-M30 {
    margin-top: -30px
}

.mt-M70 {
    margin-top: -70px
}

.mt-M10 {
    margin-top: -10px
}

.headingBg h1 {
    padding: 0;
    margin: 0;
}

.page3 .aniSec2 .headingBg {
    z-index: 999;
    position: relative;
}

.videoBox {
    padding: 5px 5px 0;
    background: #005181;
    width: 55%;
    margin: 0px auto;
}

.page7 .videoBox h3 {
    display: inline-block;
}

.videoBox h3 {
    color: #fff;
    font-size: 1.1em;
    text-align: center;
    margin: 10px;
}

.no-padding {
    padding: 0 !important
}

.main {
    width: 100%;
    margin: 0px;
    padding: 0;
    overflow: hidden;
}

.pageContainer {
    background-image: url(../assets/img/mainBg.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.MenuSection ul {
    margin: 70px 3% 5% 5px;
}

.MenuSection {
    z-index: 100;
    display: none;
    width: 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    /*padding: 5px 6% 5% 10px ;*/
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-box-shadow: -2px 0px 8px 0px rgba(77, 75, 77, 1);
    -moz-box-shadow: -2px 0px 8px 0px rgba(77, 75, 77, 1);
    box-shadow: -2px 0px 8px 0px rgba(77, 75, 77, 1);
}

.MenuSection ul li {
    list-style-type: none;
    font-size: 1.6em;
    padding: 8px 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-right: 15px;
    cursor: pointer;
}

.MenuSection ul li .fa {
    float: right;
    font-weight: bolder;
    color: #005181;
    margin-top: 2px;
    font-size: 1.2em;
}

.MenuSection ul li:last-child {
    position: fixed;
    bottom: 20px;
    width: 41%;
}

.MenuSection.active ul {
    opacity: 1;
    -webkit-animation: fadein 2s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s;
    /* Firefox < 16 */
    -ms-animation: fadein 2s;
    /* Internet Explorer */
    -o-animation: fadein 2s;
    /* Opera < 12.1 */
    animation: fadein 2s;
}

.MenuSection ul {
    opacity: 0;
    -webkit-animation: fadein 2s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s;
    /* Firefox < 16 */
    -ms-animation: fadein 2s;
    /* Internet Explorer */
    -o-animation: fadein 2s;
    /* Opera < 12.1 */
    animation: fadein 2s;
}

.MenuSection .menuTab,
.MenuSection .exitTab {
    color: #212529;
}

.menuBackdrop {
    background: rgba(77, 77, 77, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 99;
    height: 100%;
    width: 100%
}

.page11 .backToOfficeBtn span,
.page12 .backToOfficeBtn span {
    color: #000
}

.mt60 {
    margin-top: 60px;
}

.pd0 {
    padding: 0
}

.screenBg {
    left: 0;
    top: 15%;
    width: 100%;
}

.screenData {
    position: absolute;
    width: 100%;
    top: 10%;
}

.page10 .screenData {
    padding: 0 0vh;
    max-width: 78%;
}

.page3 .aniSec1 .screenData {
    z-index: 99;
    text-align: center;
    position: absolute;
    width: 97%;
    padding: 0 15vh 0 23vh;
    top: 50%;
    height: auto;
    transform: translate(0px, -50%);
    max-height: 82%;
    overflow: auto;
    text-align: center;
}

.screenData {
    z-index: 99;
    text-align: center;
    position: absolute;
    width: 100%;
    padding: 0 15vh;
}

.popupData {
    z-index: 99;
    text-align: center;
    position: absolute;
    width: 100%;
}

.screenData h2 {
    color: #3D3D3D;
    font-size: 2rem;
    line-height: 1.1em;
    margin-bottom: 0;
    display: inline-block;
}

.page1 .instructionText,
.page2 .instructionText {
    display: inline-block;
}

.popoupData h2 {
    color: #3D3D3D;
    font-size: 3.2rem;
    line-height: 1.1em;
    margin-bottom: 0;
}

.page2 .passionContainer {
    margin-bottom: 3vh;
}

.noBg {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.page2 .instructionText {
    font-size: 1.4em;
    margin-bottom: 10px;
    padding: 2vh 4vh;
}

.instructionText {
    font-size: 1.5em;
    margin-bottom: 10px
}

.page1 .headingBg {
    width: 16%;
}

.btn2,
.btn3 {
    /*  background: url('../assets/img/ButtonGrBg.png') repeat 0 0;
  */
    background-size: contain;
    /*padding: .2em 4em .1em;*/
    font-size: 2em;
    /*    -webkit-box-shadow: 0px 0px 3px 1px rgba(194, 190, 194, 1);
    -moz-box-shadow: 0px 0px 3px 1px rgba(194, 190, 194, 1);
    box-shadow: 0px 0px 3px 1px rgba(194, 190, 194, 1);
*/
    color: #FFF;
    border: 0;
}

.page2 .passion.disable {
    cursor: default;
    padding: 1.5vh 1vh;
    border: 3px solid #005181;
    background: #fff;
    color: #000;
    border-radius: 0;
    margin: 5px 1.2%;
    opacity: .5;
    cursor: not-allowed;
}

.btnTrans {
    font-size: 1em;
    padding: 1.5vh 1vh;
    border: 3px solid #005181;
    background: #fff;
    border-radius: 0;
    width: 16.9%;
    margin: 5px 1.2%;
    font-family: 'BBC_md';
}

.btnTrans:hover {
    color: #005181;
    background: #fff;
    border-radius: 0;
    -webkit-transition-duration: 0.2s;
    /* Safari */
    transition-duration: 0.2s;
}

.btn3 {
    font-size: 1.5em;
}

.slice {
    display: block;
}

.textCenter {
    text-align: center
}

.pull-left {
    float: left;
    width: 100%
}

.page1 .modal .headingBg h1 {
    font-size: 1.8em;
    padding: 1vh;
}

.modal .headingBg h1 {
    font-size: 4.3em;
    padding: 35px 61px 4px;
}

.btn2,
.btn3 {
    /*width: 23%;*/
}

.btn_gredi img {
    height: 92px;
}

.btn2 img,
.btn3 img {
    height: 92px;
}

.btnText {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    font-size: 1.4rem;
    padding: 4.2vh;
    left: 0;
    color: #fff;
    text-decoration: none;
    padding: 8%;
}

a,
a:hover {
    color: #fff;
    text-decoration: none;
}

button.btn_gredi,
.btn2,
.btn3 {
    font-size: 1.4em;
    color: #fff;
    border: 0;
    position: relative;
    background: transparent;
    /*-webkit-box-shadow: 0px 0px 5px 0px rgba(204, 204, 204, 1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 5px 0px rgba(204, 204, 204, 1);
    background: url('../assets/img/ButtonGrBg.png') repeat 0 0;
    background-size: contain;
    -webkit-clip-path: polygon(4% 0%, 97% 0%, 95% 100%, 5% 100%);
    clip-path: polygon(4% 0%, 97% 0%, 95% 100%, 5% 100%);
    outline: none;
        transform: rotate(-1deg);
    */
}

.btn_gredi span {}

.btnBlank,
.btnBlank:focus {
    font-size: 1.1em;
    width: 20%;
    background: transparent;
    border: 0;
    cursor: default !important;
    margin: 16px 0 0px;
    font-weight: bold;
}

#modal1 .popupData {
    top: 0%;
    width: 100%
}


/* Page1 CSS */

.page1 {
    margin-left: 2%;
    margin-right: 2%;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
    padding-top: 5vh;
}

.page1 .modal-body .screenBg,
.page1 .modal-body {
    padding: 0;
}

.page1 .modal-body .headingBg {
    position: : initial;
    margin-top: -79px;
    margin-bottom: 20px;
    clip-path: polygon(2% 11%, 98% 3%, 100% 100%, 1% 100%);
    padding: 3% 2% 1%;
    width: 55%;
}

.page .video-wrapper {
    position: relative;
}

.page .video-wrapper .videoPlayBtn,
.page .video-wrapper .videoloader {
    background: #004974;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#modal1 .popupData {
    top: 0%;
    width: 100%;
    padding: 0 6% 0 4%;
}

.page1 #modal1 .screenBg.showForDesktop {
    width: 100%;
    height: auto;
}

.page .video-wrapper .videoPlayBtn .videoPlay,
.page .video-wrapper .videoloader .loader {
    position: absolute;
    width: 12%;
    left: 45%;
    top: 50%;
    cursor: pointer;
    transform: translate(0px, -50%);
}

.page .video-wrapper .videoPlayBtn .videoPlay img {
    width: 100%;
}

.page.page7 .video-wrapper .videoPlayBtn .videoPlay img {
    width: 50%;
}

.backToOfficeBtn span {
    font-size: 1em;
}

.page .video-wrapper .videoloader {
    display: none;
}

.page9 .popupData {
    top: 55px;
    height: 88%;
}

.page1 #transcriptModal .screenBg.showForDesktop {
    width: 100%;
    height: auto;
}

.page1 .screenBg.showForDesktop {
    width: 100%;
    height: 85vh;
}

.page1 .screenBg {
    margin: 0px auto;
    height: 100%;
    padding: 0% 5% 1%;
}

.page1 .screenData h2 {
    font-size: 1.4em;
}

.page1 .screenData {
    top: 4%;
}

.page1 .videoBox {
    height: auto;
    width: 76vh;
}

.page .video-wrapper .videoloader .loader {
    cursor: default;
}

.page1 .videoPlayer {
    height: 50vh;
}


/* Page2 CSS */

.page2 {
    margin-left: 7.5%;
    margin-right: 7.5%;
    background-repeat: no-repeat;
    width: 85%;
    position: relative;
    display: grid;
    padding-top: 6vh;
}

.page2 .nextBtn {
    cursor: pointer;
}

.page2 .nextBtn.disable {
    cursor: default;
    opacity: 0.5;
}

.passion:focus {
    border-radius: 0;
    border: 3px solid #005181;
    outline: none;
    outline: 1px solid #000;
}

.page2 .passion.selected {
    background: #005181;
    color: #fff;
    border-radius: 0;
    -webkit-transition-duration: 0.2s;
    /* Safari */
    transition-duration: 0.2s;
}

.page2 .screenData {
    top: 10vh;
    width: 99%;
    padding: 0 1%;
    height: 75vh;
}

.page2 .screenBg {
    height: 75vh;
}

.page4 .profileHeader {
    padding: 2% 1% 1%;
    text-align: center;
}


/* page3 css */

.page3 .boldText,
.page3_1 .boldText {
    font-weight: bold !important;
}

.page3 {
    padding: 3% 12% 0;
}

.prelative {
    position: relative;
}

.page3 .headingBg .instructionText {}

.page3 .btn3 {
    /* width: 70%;
    clip-path: polygon(4% 8%, 98% 3%, 100% 100%, 0% 100%);
    outline: 5px solid #fff;
    outline-offset: 5px;*/
}

.page3 .headingBg {
    margin-top: 8%;
    width: 50%;
    padding: 45px 30px 35px 52px;
    text-align: center;
    margin-right: 0%;
    float: right;
    position: initial;
}

.page3 .screenData .instructionText {
    padding: 0px 4%;
}

.item {
    height: 100%;
}

.profileHeader h3 {
    color: #fff;
    font-size: 2.5em;
    display: inline-block;
}

.profilePicPlaceholder {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-image: url('../assets/img/proBg.png');
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
}

.imgBg {
    position: fixed;
    width: 60%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: bottom left;
    z-index: 99;
    background-size: 80vh;
}

.page4 p {
    font-size: 1.4em;
    color: #fff;
    margin-bottom: 10px;
}

.h1,
h1 {
    font-size: 2.2rem;
}

.page4 .slice.bgColor1 {
    overflow: auto;
    max-height: 44vh;
    padding: 2% 15% 1%;
}

.selMemJobDetails {
    color: #fff;
    font-size: 1.4em
}

.selMemJobDetails p {
    font-size: inherit;
}

.btn4,
.btn4:focus {
    background: transparent;
    color: #fff;
    font-size: 1.1em;
    border: 0;
    margin-bottom: 10px;
    padding-top: 15px;
    cursor: default;
}

.page4 .btn4 {
    margin: 0;
}

.page4,
.page6,
.page7 {
    background: url('../assets/img/pageGrBg.png') repeat 0 0;
    background-size: contain;
}

.page4 .profileHeader .page6 .profileHeader {
    text-align: center;
    padding: 25px 0 15px;
    margin: 0px auto;
}

.officeBox {
    border: 4px solid #fff;
    padding: 5px;
    position: relative;
}

.bgColor1 {
    background: #0d5066;
}

.bgColor3 {
    background: url(../assets/img/pageGrBgMobile.png) 0 0 repeat-x;
    background-size: contain;
}

.bgColor2 {
    background: #00b4bf;
}

.pd-2-4Per {
    padding: 2% 4% 1%;
}

.mt-20 {
    margin-top: 20px
}

.page9Bg img.showForDesktopcenterImg,
.page9Bg img.showForMobile.img-responsive {
    opacity: 0.5
}

.m-b0 {
    margin-bottom: 0;
}

.pb40 {
    padding-bottom: 50px;
}

.page3_1Right {
    float: right;
    width: 32%;
    margin-right: 15%;
    margin-top: 7%;
}

.page3_1 .capLett {
    text-transform: capitalize;
}

.page3_1 {
    background-repeat: no-repeat;
    background-size: 96vh;
    background-position: bottom left;
    position: absolute;
}

.font18 {
    font-size: 1.8rem;
}

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

.page3_1 .screenData {
    top: 50px;
    height: 59%;
}

.pd-10_10_5 {
    padding: 10px 10px 5px;
}

.top18Per {
    margin-top: 18%
}

.page3_1 .btn3 {
    margin-top: 10%;
}

.img-responsive {
    width: 100%
}

h3.titleText {
    font-size: 2.5em;
    display: inline-block;
}

.theOfficeBox {
    border: 3px solid #005181;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(194, 190, 194, 1);
    -moz-box-shadow: 0px 0px 3px 1px rgba(194, 190, 194, 1);
    box-shadow: 0px 0px 3px 1px rgba(194, 190, 194, 1);
    padding: 20px 10px;
    min-height: 31vh;
}

.theOfficeBox:focus {
    border: 3px solid #005181;
    outline: 2px solid #828282 !important;
}

.page5 .screenData {
    padding: 0px 45vh;
    top: 5px;
    left: 50%;
    transform: translate(-50%, 10px);
}

.page5 .aniSec1,
.page12 .aniSec1 {
    position: relative;
    z-index: 9;
}

.theOfficeBox img {
    width: 50%;
    position: absolute;
    transform: translate(0%, 0);
    bottom: 0;
}

.page5 {
    background: url('../assets/img/pageGrBg.png') repeat 0 0;
    background-size: contain;
    padding-top: 5vh;
}
.page8 {
    background: url('../assets/img/pageGrBg.png') repeat 0 0;
    background-size: contain;
    
}

.page10 {
    background: url('../assets/img/pageGrBg.png') repeat 0 0;
    background-size: contain;
    
}
.page5 .aniSec2 .screenBg.showForDesktop {
    height: 65vh;
    width: auto;
    margin: 0px auto;
}

.page5 .headingBg {
    background: #d62f69;
    color: #fff;
    position: relative;
    z-index: 99999;
}

.page9 .theOfficeBox h2 {
    font-size: 1.2em;
}

.page5 .theOfficeBox h2 {
    font-size: 1.4em
}

.theOfficeBox h2 {
    font-size: 1.4em;
    /* text-transform: uppercase; */
    line-height: inherit;
    transform: translate(0%, -44%);
    line-height: 4vh;
}

.mt30 {
    margin-top: 30px
}

.theOfficeBox.box1 {
    background: url(../content/page5/img/ico1.png) no-repeat center 80%;
    background-size: 50%;
    float: left;
    width: 100%;
}

.theOfficeBox.box2 {
    background: url(../content/page5/img/ico2.png) no-repeat center 80%;
    background-size: 38%;
}

.theOfficeBox.box3 {
    background: url(../content/page5/img/ico3.png) no-repeat center 83%;
    background-size: 38%;
    width: 100%;
}

.theOfficeBox.box4 {
    background: url(../content/page5/img/ico4.png) no-repeat center 78%;
    background-size: 40%;
    width: 100%;
}

.honeYourSkillsBtn.theOfficeBox.box5 {
    min-height: 60px;
}

.theOfficeBox.box5 {
    background: url(../content/page5/img/ico5.png) no-repeat 90% center;
    background-size: 20%;
    width: 49%;
    margin: 0px auto;
    min-height: 16vh;
    margin-top: 2.8%;
    padding: 20px;
}

.page5.item .screenData .honeYourSkillsBtn h2 {
    transform: translate(-50%, -32%);
}

.page9 .PopUpContent .text {
    font-size: 1.4em;
}

hr {
    background: #fff;
    width: 60%;
    opacity: .5;
    margin-bottom: auto;
    margin-top: 1.3rem;
}

.theOfficeBox.box5 h2 {
    text-align: left;
}

.text1 {
    color: #fff;
    font-size: 2.4em;
}

.text2 {
    font-size: 1.1em;
    color: #fff
}

.page6 p {
    font-size: 1.2em;
    padding: 0 2%;
    display: inline-block;
}

.page7 .videoBox {
    width: 100%;
    /* margin: 0% 10% 4% 10%; */
}

.page7 .screenBg.showForDesktop {
    height: 74vh;
}

.page7 .textBox p {
    font-size: 1.1em;
}

.page7 video {
    height: 47vh;
}

.page7 .videoBox .d-flex {
    float: left;
    margin-top: 32px;
    margin-left: -5px;
}

.page.page7 .video-wrapper .videoPlayBtn .videoPlay,
.page.page7 .video-wrapper .videoloader .loader {
    position: absolute;
    width: 38%;
    left: 50%;
    top: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.backBtn {
    position: absolute;
    left: 1%;
    text-align: left;
    width: 195px;
    top: 1%;
    z-index: 9;
}

.backBtn .fa {
    float: left;
    font-size: 1.5em;
    margin-right: 10px;
    cursor: pointer;
}

.imgResponsive {
    width: 100%
}

.pd2per {
    padding: 3%;
}

.page8 .audioPlayerBg {
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.audioPlayerBg {
    background: #fff;
    padding: 30px
}

.page8 .screenData {
    padding: 6px 12% 0 8%;
    top: 27px;
}

.page8 .bgColor2 p {
    font-size: 1.2em
}

.page8 .videoBox,
.page8 audio {
    width: 100%;
    float: left;
}

.page8 .text2 ul {
    margin-top: 20px;
}

.page8 .text2 ul li a {
    color: #ffffff;
}

.page8 .text2 ul li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.page8 .topTipsAudioData .rowContainer {
    margin-bottom: 50px;
}

.page9 .text1 {
    padding: 2% 1% 1%;
}

.page9 .centerImg {
    height: 100vh;
    opacity: 0.6;
}

.page9 .tabs {
    position: absolute;
    width: 19vh;
    height: 19vh;
    border-radius: 50%;
    background: transparent;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    cursor: pointer;
}

.page9 .screenData {
    height: 100%;
    top: 0;
}

.page9 .tab0 {
    right: 45%;
    top: 46%;
}

.page9 .tab1 {
    left: 10%;
    top: 0%;
}

.page9 .tab2 {
    right: 20%;
    top: -10%;
}

.page9 .tab3 {
    left: 20%;
    bottom: 30%;
}

.page9 .tab4 {
    right: 30%;
    bottom: 15%;
}

.page9 #modalPopup .popupHeaderText {
    position: absolute;
    color: #fff;
    font-size: inherit;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    top: 0%;
    transform: translateY(0%);
    font-size: 1.1em;
    bottom: 0;
}

.page9 .popupHeaderText .text.tabElm {
    position: absolute;
    font-size: 1rem;
    width: 87%;
    top: 50%;
    transform: translate(0px, -50%);
    padding: 0 10px;
}

.bbc3 .page5 .theOfficeLogo {
    margin-bottom: 5px;
    width: 50px;
}

.page9 .popupData .PopUpContent {
    transform: translateY(-50%);
    max-height: 62%;
    overflow: auto;
    padding: 0%;
    position: absolute;
    right: 4%;
    left: 3%;
    top: 66%;
}

.page9 .popupHeaderImages {
    width: 23vh;
    margin: 0px auto;
    position: relative;
    top: -38px;
}

.page9 .popupHeaderImages .popupHeaderChar {
    position: absolute;
    top: -8vh;
    right: -3vh;
    width: 81px;
}

.page9 .tabs .charCircle {
    width: 100%;
    position: absolute;
}

.page9 .tabs p {
    z-index: 9;
    margin: auto;
    padding: 0px 10px;
    font-size: 2vh;
    line-height: initial;
    color: #005181;
}

.page9 .popupData p {
    font-size: 1.1em
}

.page9 .tab0 p {
    font-size: 1.3em;
}

.page9 .tab0.tabs img.mainCharCircle {
    width: 100%;
    position: absolute;
}

.page9 .tab0.tabs img.tabCarImg {
    position: absolute;
    top: -60px;
    width: 140px;
    right: -30px;
    width: 15vh;
}

.page9 .popupData img.popupHeaderChar {
    height: 15vh;
    width: auto;
}

.page9 .popupData img {
    height: 24vh;
}

.page9 .tab0.tabs {
    width: 23vh;
    height: 23vh
}

.page9 .popupHeaderText p {
    margin: 0
}

.page9 .popupHeaderText {
    transform: translateY(-50%);
    top: 50%;
}

.page9 .popupData {
    top: 0;
    width: 96%;
    padding: 0px 30px;
}


/*.page9 img{opacity: 0.5;}*/

.page10 h3 {
    margin: 35px 0 0px;
    text-align: center;
}

.page10 .detailText img {
    width: 80px;
}

.page11 .theOfficeBox img {
    width: auto;
    height: 10vh;
    position: relative;
    transform: translate(0, 0);
    margin: 0px auto;
    margin-bottom: 0px;
}

.page11 .theOfficeBox {
    height: auto;
    padding: 2% 5%;
    display: block;
}

.page11 .screenData h2 {
    font-size: 2rem;
}

.page11 .screenData a h2 {
    font-size: 1.4rem;
}

.page11 a.theOfficeBox:hover {
    text-decoration: none;
}

.page11 .mt60 {
    margin-top: 40px;
}

.page11 {
    padding: 5% 8% 0 8%;
    display: inline-block;
}

.page11 .screenData {
    padding: 0 8% 0 8%;
    top: 7%;
}

.colorBlack {
    color: #3D3D3D !important
}

.theOfficeBox svg {
    position: absolute;
    right: 24px;
    top: 10px;
    fill: #858381;
}

.page11 .theOfficeBox h2 {
    text-transform: none;
    transform: translate(0%, 6%);
}

.page12 {
    display: inline-block;
    padding: 0px 5%;
    width: 100%
}

.page11 .aniSec1 img.showForDesktop {
    height: 70vh;
}

.page12 .aniSec1. {
    position: relative;
    z-index: 9;
}

.page12 .aniSec2 .screenBg.showForDesktop {
    height: 80vh;
    margin: 0px auto;
}

.page12 .screenData {
    margin-top: 0px;
    padding: 0px 4% 0 3%;
    top: 5%;
}

.text3 {
    font-size: 1.8em;
}

.mt20 {
    margin-top: 20px;
}

.page2 .mt30 {
    margin-top: 1%;
}

.whiteColor {
    color: #fff
}

.page6 #screen6 a {
    position: absolute;
    width: 11%;
    height: 27%;
    z-index: 2;
    border-radius: 50%;
}

.page6 #screen6 a.icon_0 {
    left: 0%;
    top: 14%;
}

.page6 #screen6 a.icon_1 {
    left: 10.07%;
    top: 63.6%;
}

.page6 #screen6 a.icon_2 {
    left: 21.8%;
    top: 14%;
}

.page6 #screen6 a.icon_3 {
    left: 33.07%;
    top: 63%;
}

.page6 #screen6 a.icon_4 {
    left: 44%;
    top: 14%;
}

.page6 #screen6 a.icon_5 {
    left: 55.5%;
    top: 63.8%;
}

.page6 #screen6 a.icon_6 {
    left: 67%;
    top: 14%;
}

.page6 #screen6 a.icon_8 {
    left: 88.5%;
    top: 13.6%;
}

.page6 #screen6 a.icon_7 {
    left: 78.5%;
    top: 64.86%;
}

.page6 .popupData {
    top: -3vh;
}

.page6 .popupData img {
    width: 22%;
}

.page6 .PopUpContent h2 {
    transform: translate(0%, 50%);
}

.page6 .PopUpContent {
    font-size: 1.2em;
    margin: 0% 6% 0 7%;
    overflow: auto;
    height: auto;
    max-height: 64%;
    width: auto;
    transform: translate(0%, -50%);
    top: 68%;
    left: 0;
    right: 0;
    position: absolute;
}

.page6 .popupData {
    width: auto;
}

.inlineBlock {
    display: inline-block;
}

.page7 .text1 {
    margin-top: 45px;
}

.page8 .text1 {
    margin-top: 45px;
}

.page9 .PopUpContent {
    margin-top: 1%
}

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

.page9 .popupData {
    top: 0
}

.page10 .screenData img {
    width: 12vh;
    margin-top: -9vh;
}

.text5 {
    font-size: 1.2em
}

.page12 .allMembers .role {
    display: block;
    cursor: pointer;
    position: relative;
    margin-bottom: 25px;
}

.page12 .allMembers #role_0_0 {}

.page12 .allMembers #role_0_1 {}

.page12 .allMembers #role_0_2 {}

.page12 .allMembers #role_1_0 {}

.page12 .allMembers #role_1_1 {}

.page12 .allMembers #role_1_2 {}

.page12 .theOfficeBox h2 {
    font-size: 1.2rem;
    text-transform: inherit;
    line-height: initial;
    width: 50%;
    transform: translate(0%, -50%);
    line-height: 24px;
    position: absolute;
    top: 50%;
    text-align: left;
    line-height: inherit;
    display: block;
}

.page12 .theOfficeBox {
    min-height: 30vh;
}

#role_0_0 img {
    left: 0
}

#role_0_0 h2 {
    float: right;
    right: 3%;
}

#role_0_1 img {
    right: 0
}

#role_0_1 h2 {
    float: left
}

#role_0_2 img {
    left: 0
}

#role_0_2 h2 {
    float: right;
    right: 3%;
}

#role_0_3 img {
    right: 0
}

#role_0_3 h2 {
    float: left
}

#role_1_0 img {
    right: 0
}

#role_1_0 h2 {
    float: left
}

#role_1_1 img {
    left: 0
}

#role_1_1 h2 {
    float: right;
    right: 3%;
}

#role_1_2 img {
    right: 0
}

#role_1_2 h2 {
    float: left;
    width: 71%;
}

.page12 .theOfficeBox#role_1_2 h2 {
    /*    transform: translate(0%, 6%);*/
}

.page12 .text3 {
    margin: 10px 0;
}

.backToOfficeBtn span {
    font-size: 18px;
    float: right;
    margin: 2px;
	color:#000;
	margin-left: 10px;
	
}

.backToOfficeBtn {
    cursor: pointer;
    display: flex;
}

.bbcRadio1 .page5 .headingBg {
    background: #000;
    color: #fff;
}

.page10 .detailText img {
    margin: 0PX auto 20px;
    display: block;
}

.page6 .popupData {
    width: 95%;
    height: 88%;
}

.page6 .logoImgHolder {
    margin-top: -30px;
}

.page5 .logoImgHolder {
    margin-top: -60px;
}

.page5 .logoImgHolder img {
    width: 11vh;
    margin-bottom: 5px;
}

#screen6 {
    margin: 2% auto 0;
    position: relative;
    width: 85%;
}

.menuBtn span {
    background: #000;
}

.page6 #modalPopup .modal-dialog {
    max-width: 55% !important;
}

.page9 .page9Bg {
    padding: 0;
    margin: 0px;
}

.page9 .tab2 {
    right: 18%;
    top: 30%;
}

.page9 .tab1 {
    left: 5%;
    top: 60%;
}

.page9 .tab1 {
    left: 19%;
    top: 32%;
}

.page9 .tab3 {
    left: 10%;
    bottom: 12%;
}

.videoSlice {
    margin: 20px 16%;
}

.item.page3_1 .screenData .top18Per {
    margin: 20px;
    padding: 0 20px;
    font-size: 1.2em;
}

.menuArrow img {
    width: 35px;
}

.page5 .screenData {
    padding: 0px 5%;
}

.menuArrow {
    width: 20px;
    float: right;
    padding-right: 30px;
}

.page1 #transcriptModal .modal-closeBTN {
    position: absolute;
    right: 2%;
    top: -9%;
}

.backToOfficeBtn .btnText img {
    height: 20px;
}

.page5 .aniSec2 {
    text-align: center;
}

.centerPage6 {
    width: auto;
    display: inline-block;
    margin: 0px auto;
}

.page6 hr {
    width: 100%;
    margin: 0 0 10px 0;
}

.backToOfficeBtn img {
    width: 36px;
    height: 26px;
}

.centerImg {
    margin: 0px auto
}

.page11 .screenData a {
    background: url(../content/page11/img/linkIco.png) 98% 5px no-repeat;
    background-size: 24px;
    display: grid;
    min-height: 23vh;
    margin-bottom: 5%;
}

.page11 .theOfficeBox.tab4 img {
    height: 12vh;
}

.mt10 {
    margin-top: 10px
}


/*.page9Bg .showForDesktop{height: 606px;}*/

button:focus {
    border: 0;
    outline: 0;
}


/*.bgColor2 {
    background:url(assets/img/pageGrBgMobile.png) 0 0 repeat-x;
}*/

.w30 {}

.popupData h2 {
    font-size: 1.6em;
}

.popupData #modal1 h2 {
    font-size: 2em;
    line-height: 5vh;
    padding: 0 10vh;
}

.pd3_3_0 {
    padding: 3% 3% 0;
}

.modal-open .modal {
    overflow: hidden;
}

.stage.screen9 {
    background: url(../assets/img/pageGrBg.png) repeat 0 0;
    background-size: contain;
}

.modal-content {
    background: transparent;
}

.page7 .screenData {
    margin: 3% 3%;
    top: 8%;
    padding: 0;
    width: 94%;
    overflow-x: hidden !important;
}

.item.page3_1 .screenData .top18Per {
    max-height: 83%;
    overflow: auto;
    height: auto;
    transform: translate(0px, -50%);
    top: 44%;
    position: absolute;
    left: 0;
    right: 0;
}

.page3_1 .headingBg .tabElm_1 {
    font-size: 2rem;
}

.page3_1 .headingBg {
    width: 60%;
}

.page3_1 .screenData {
    padding: 10% 7% 2%;
    /* max-height: 56%;
    height: auto;*/
}

.btn2.backToOfficeBtn img {
    width: auto;
}

.btn2.backToOfficeBtn {
    width: 100%;
}

.modal.fade .modal-dialog {
    transform: translate3d(0, 100vh, 0);
}

.modal.show .modal-dialog {
    transform: translate3d(0, 0, 0);
}

#modal1 {
    overflow: hidden;
}

.page5 .aniSec2 {
    margin-top: 5px;
}


/*.dFlex{display: flex;}*/

.transcriptBtn img {
    width: 15px;
    margin-right: 2px;
}


/*.dFlex{display: flex;}*/

.transcriptBtnWrapper {
    width: 76vh;
    margin: 5px auto;
    text-align: left;
    font-size: 12px;
}

.transcriptBtn img {
    width: 15px;
    margin-right: 2px;
}

.transcriptBtnWrapper .transcriptBtn {
    display: inline;
    cursor: pointer;
    color: #212529;
}

.modal-header {
    border: 0;
}

#TranscriptModal .popupData {
    width: 94%;
    top: 70px;
    padding: 0 8%;
}

.page1 .screenBg.mt6Per {
    margin-top: 6%;
}

#TranscriptModal .transcriptBtn {
    width: auto;
    margin: 5px auto;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}

#transcriptModal .modalContent {
    overflow: auto;
    height: 450px;
    text-align: left;
}

.page1 #transcriptModal .modalContent {
    height: auto;
}

.page7 #transcriptModal .modalContent {
    height: auto;
}

.page7 .videoBox .transcriptBtn {
    position: absolute;
    bottom: 4px;
    cursor: pointer;
    color: #212529;
}

#TranscriptModal .modal-closeBTN {
    position: absolute;
    right: 8%;
}

.page7 #transcriptModal .modal-closeBTN {
    top: -5%;
    right: 4%;
}

.secondLast {
    background: #efefef;
}

.secondLast:after {
    background: #efefef;
    position: absolute;
    top: 0;
    height: 100%;
    content: "";
    width: 100%;
    left: 0;
}

.w100per {
    width: 100%
}

.btnFixed {
    text-align: center;
    width: 100%;
    display: block;
    position: fixed;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 99;
}

#transcriptModal .popupData {
    top: 5%;
    margin: 0 9vh 0 8vh;
    height: 91%;
    overflow: auto;
    width: auto;
}

#transcriptModal .transcriptBtn {
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
}

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

#transcriptModal p,
#transcriptModal h5 {
    font-size: 1.1em;
}

#transcriptModal .modal-closeBTN {
    position: absolute;
    right: 1%;
    top: -9%;
    z-index: 101;
}

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

.page7 #transcriptModal .popupData {
    top: 5%;
    padding: 0 0%;
    height: 90%;
    overflow: auto;
    margin: 0 4%;
    width: 90%;
}

.page8 .slice p.topTipsHeading {
    padding: 0 10%;
}

.page9 .text2.rolesHeading {
    padding: 0 15PX;
}

.liHighlite:after {
    position: absolute;
    content: "";
    background: #ddd;
}

.page8 .text2.topTipsHeading.tabElm {
    padding: 0 4%;
}

.page9 #modalPopup .modal-dialog {
    max-width: 500px;
    margin: 3.75rem auto;
}

.page9 a.tab0 p {
    font-size: 1.1em;
}

.loader,
.loader:before,
.loader:after {
    background: #ffffff;
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
    display: none;
}

.loaderBg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgb(62 115 115 / 68%);
    z-index: 999999;
    display: none;
}

.loader {
    color: #ffffff;
    text-indent: -9999em;
    font-size: 11px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    position: absolute;
    top: 0;
    content: '';
}

.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 1.5em;
}

@-webkit-keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

@keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

.screen12Grid {
    width: 31.3%;
    float: left;
    margin: 0PX 1%;
}

.customRow {}

.page6 .icon-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.reniAdebayo .screenData .col-sm-12.col-md-4 {
    flex: 100%;
    max-width: 100%;
    margin: 0px auto;
    padding: 0 4% 0 3%;
}

.page10 .slice.pd3_3_0 {
    padding: 5% 3% 5%;
}

.page10 .text5 {
    font-size: 1.2em;
    margin-top: 6%;
}

.imageLoader {
    position: fixed;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -9;
}

.icoHead {
    width: 18%;
    margin: 0px auto 6% auto;
}

.page7 .textBox {
    height: 61vh;
    overflow: auto;
}

.imgBgPage3_1 {
    background-repeat: no-repeat;
    background-size: 97%;
    height: 85%;
    width: 46%;
    bottom: 0;
    position: fixed;
    background-position: bottom left;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .page1 #modal1 .screenBg.showForDesktop {
        height: 400px;
    }
    .MenuSection {
        z-index: 999999999;
    }
    .page6 .screenBg.showForDesktop {
        height: 500px
    }
    .page9 .tabs .charCircle {
        top: 0
    }
    .page9 .tab0.tabs img.mainCharCircle {
        left: 0;
        top: 0
    }
    .page9 .popupData .PopUpContent {
        top: 38vh;
        height: 37vh;
        max-height: 10%
    }
    .page9 .tabs p {
        width: 100%;
        padding-left: 14%;
        line-height: 18px;
    }
    .page11 .screenData a h2 {
        display: block
    }
    .page9 .tab0.tabs p {
        padding-left: 5px
    }
    .page9 #modalPopup .modal-dialog {
        top: 10%
    }
}
#section04 { background: url(https://picsum.photos/1200/800?image=506) center center / cover no-repeat;}
#section05 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
a.proScrollBtn {
  position: fixed;
  bottom: 0px; 
  z-index: 2;
  display: none;
  color: #fff;
  font : normal 400 15px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
  width: 100%;
    text-align: center;
    padding: 10px 0;
    height: 60px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+17,000000+100&0.65+48,0+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 17%, rgba(0,0,0,0.65) 48%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 17%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 17%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}


a.proScrollBtn span {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb04 2s infinite;
  animation: sdb04 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-8px, 8px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-8px, 8px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}
.reniAdebayo .screenData .col-sm-12.col-md-8{width: 96%; flex: 0 0 96%; max-width: 96%;}
.reniAdebayo .screenData .col-sm-12.col-md-8 .textBox{text-align: left }

.reniAdebayo .page7 .screenData { margin: 3% 3%; top: 0%;}
.topTipsAudioData .tabElm ul li{list-style-type: decimal;margin-bottom: 20px;}
.page10 .dataText ul li{list-style-type: decimal;}
.font1-4em{font-size:1.4em !important;}

.page4 .backToOfficeBtn span, .page6 .backToOfficeBtn span, .page7 .backToOfficeBtn span, .page9 .backToOfficeBtn span, .page8 .backToOfficeBtn span, .page10 .backToOfficeBtn span{color:#fff;}

.btn_gredi:hover .btnBg{display:none}
.btn_gredi:hover .btnBgHover{display:block}
.btnBgHover{display:none}

.viewMoreBTN:hover .btnBg{display:none}
.viewMoreBTN:hover .btnBgHover{display:block}
.btnBgHover{display:none}

.surpriseBtn:hover .btnBg{display:none}
.surpriseBtn:hover .btnBgHover{display:block}
.btnBgHover{display:none}

.gotoOfficeBtn:hover .btnBg{display:none}
.gotoOfficeBtn:hover .btnBgHover{display:block}
.btnBgHover{display:none}

.whatNextBtn:hover .btnBg{display:none}
.whatNextBtn:hover .btnBgHover{display:block}
.btnBgHover{display:none}

.tryAnotherRole:hover .btnBg{display:none}
.tryAnotherRole:hover .btnBgHover{display:block}
.btnBgHover{display:none}

.nextBtn:hover .btnBg{display:none}
.nextBtn:hover .btnBgHover{display:block}
.btnBgHover{display:none}


 #page4 .menuBtn span, #page5 .menuBtn span, #page6 .menuBtn span, #page7 .menuBtn span, #page8 .menuBtn span, #page9 .menuBtn span, #page10 .menuBtn span {
    background: #fff;
}
.MenuSection .menuBtn span {
    background: #000 !important;
}

.btn_gredi.readyBTN{margin-top: 25px;}