@font-face {
    font-family: 'RotisSansSerif';
    src: url('/fonts/Rotis SemiSans 55.eot');
    src: local('Rotis Semi Sans Std'), url('/fonts/Rotis SemiSans 55.otf') format('opentype');
    src: local('Rotis Semi Sans Std'), url('/fonts/Rotis SemiSans 55.ttf') format('truetype');
}

:root {
    --color01: #000000;
    --color03: #F47F24;
    --footer-height: 55px;
    --icon-size: calc(25vh);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: var(--footer-height);
    font-family: "RotisSansSerif", Arial !important;
    background: linear-gradient(to top, #BBBBBB, #FFFFFF);
}

header {
    background-color: #222222;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    white-space: nowrap;
}

main {
    margin-top: 24px;
    padding-top: 0;    
    background: transparent;
    height: 100%;
}

footer {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    font-size: 10px;
    z-index: 1;
    height: var(--footer-height);
}

a {
    color: #54ABCE;
    text-decoration: none;
}

.main-footer {
    font-size: 12px;    
    display: block;
    position: fixed;
    bottom: 20px;
    left: 0;
    padding-left: 50px;
}

.play-pause {    
    position: fixed;
    padding-left: 45px;
    bottom: calc(10vh - 40px);
    align-items: end;    
    z-index: 10;
}
    .play-pause a {
        cursor: pointer;
    }
    .play-pause img {
        opacity: 0.15;
    }

.hide {
    display: none;
}

.show {
    display: inline;
}

.sitemap {
    height: 24px;
    margin-top: 0;
    padding-top: 2px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    white-space: nowrap;
    background-color: #3E3E3E;
    color: #FFFFFF;
    font-size: 12px;
}

.home-item {    
    border: 5px solid #acacac;
    border-radius: 20px;
    margin-left: 20px;
    margin-top: 50px;
    height: 100px;
    width: 240px;
    text-align: center;    
    font-size: 30px;
    padding-top: 18px;
}

.menu-item-color {
    color: #9D9D9D !important;
}

.navbar-nav {
    --bs-navbar-nav-link-padding-x: 10px !important;
}

.navbar-brand {
    width: 125px;
    margin-right: 0 !important;
}

.page-content {
    padding-top: 0;
    padding-left: 50px;
    padding-right: 50px;
    text-align: left;
    margin-bottom: 0;
    background: transparent;
    height: calc(100vh - 240px) !important;
}

.active {
    color: var(--color03) !important;
    background: var(--color01) !important;
}

.page-title-home {
    position: absolute;
    margin-left: -40px;
    z-index: 1;
    width: calc(50vw);
}

.page-title-content {
    display: inline-flex;
    align-items: center;
    margin-left: -50px;
    margin-bottom: 20px;
}

.page-title {
    margin-left: 20px;
    font-weight: bold;
}

.page-title h1 {
    font-weight: bold;
    margin-left: 20px;
    z-index: 1;
}

.view {
    display: none;
    z-index: 1;
}
    .view h2 {
        color: var(--color03);
        width: calc(75vw);
        margin-bottom:0;
    }
    .view h3 {
        margin-top:calc(1.5vw);
        width: calc(70vw);
    }

.view.active-index {
    display: inherit;
    pointer-events: auto;
}

.dot {
    opacity: 0.25;
    height: calc(80vh);
    width: calc(80vh);
    background-color: transparent;
    border-radius: 100%;
    display: block;
    position: fixed;
    top: calc(40vh);
    left: calc(50vw);
    border: solid calc(20vh) #54ABCE;
    z-index: -1;
}

.dot-icon {
    opacity: 0.125;
    background-color: transparent;
    height: calc(80vh);
    width: calc(80vh);
    padding: 1px;    
    position: fixed;
    top: calc(40vh);
    left: calc(50vw);
    border: 0;
    z-index: 10;
}

.dot-icon a {
    cursor: pointer;
}

.icon-img-b1 {
    margin-top: 15px;
    margin-left: 20px;
    height: var(--icon-size);
    width: var(--icon-size);
}

.icon-img-b2 {
    margin-top: 10px;
    margin-left: 20px;
    height: var(--icon-size);
    width: var(--icon-size);
}

.icon-img-b3 {
    margin-top: 10px;
    margin-left: 25px;
    height: var(--icon-size);
    width: var(--icon-size);
}

.icon-img-j1 {
    margin-top: 20px;
    margin-left: 25px;
    height: var(--icon-size);
    width: var(--icon-size);
}

.icon-img-j2 {
    margin-top: 20px;
    margin-left: 25px;
    height: var(--icon-size);
    width: var(--icon-size);
}

.icon-img-j3 {
    margin-top: 20px;
    margin-left: 27px;
    height: var(--icon-size);
    width: var(--icon-size);
}

.icon-img-j4 {
    margin-top: 22px;
    margin-left: 23px;
    height: var(--icon-size);
    width: var(--icon-size);
}

.icon-img-j5 {
    margin-top: 25px;
    margin-left: 25px;
    height: var(--icon-size);
    width: var(--icon-size);
}

.move-right {
    display: inline-block;
    position: relative;
    animation: to-right 2s forwards;
    animation-iteration-count: 1;
}

.move-left {
    display: inline-block;
    position: relative;
    animation: to-left 2s forwards;
    animation-iteration-count: 1;
}

.spinner-interval {
    animation: spin-pause 10s ease-out infinite;
}

.keep-upright {
    transform: rotate(-360deg);
    animation: spin-pause-reverse 10s ease-out infinite;
}

.moodys {
    background-color: transparent;
    height: calc(80vh);
    width: calc(80vh);
    margin-top: 10px;    
    margin-left: -250px;
    position: absolute;
    top: calc(40vh);
    left: calc(50vw);
    border: 0;
    z-index: 10;
}

.accenture {    
    background-color: transparent;
    height: calc(80vh);
    width: calc(80vh);
    margin-top: -150px;
    margin-left: -175px;
    position: absolute;
    top: calc(40vh);
    left: calc(50vw);
    border: 0;
    z-index: 10;
}

.separator {
    height:100px;
}

#HomeArrow .my-svg {
    height: 2in;
    stroke: #BBBBBB;
    width: 2in;
    margin-left: -50px;
}

#Arrow .my-svg {
    height: 100px;
    stroke: #BBBBBB;
}

#play-video {
    box-shadow: 0 15px 30px var(--color01);
    border-radius: 10px;
    z-index: 10;
}

#MyScrollViewMain {
    height: calc(100vh - 175px);
}

@media screen and (max-width: 375px) {
    #play-video {
        width: calc(100vw - 100px);
        max-width: calc(100vh - 250px);
        height: auto;
    }

    #HomeArrow .my-svg {
        height: calc(45vw);
        width: calc(45vw);
        margin-left: 0;
    }

    #Arrow .my-svg {
        height: calc(15vw);
        width: calc(15vw);
    }

    .h1, h1 {
        font-size: 22px;
    }

    .h3, h3 {
        font-size: 18px;
    }

    .h4, h4 {
        font-size: 14px;
    }
}

@media (min-width: 376px) {
    #play-video {
        width: calc(100vw - 100px);
        max-width: calc(100vh - 250px);
        height: auto;
    }

    #HomeArrow .my-svg {
        height: calc(35vw);
        width: calc(35vw);
        margin-left: 0;
    }

    #Arrow .my-svg {
        height: calc(15vw);
        width: calc(15vw);
    }

    .h1, h1 {
        font-size: 26px;
    }

    .h3, h3 {
        font-size: 18px;
    }

    .h4, h4 {
        font-size: 14px;
    }
}

@media (min-width: 576px) {
    #play-video {
        width: calc(75vw);
        max-width: calc(100vh - 250px);
        height: auto;
    }

    #HomeArrow .my-svg {
        height: 2in;
        width: 2in;
        margin-left: -50px;
    }

    #Arrow .my-svg {
        height: 0.8in;
        width: 0.8in;
    }

    .h1, h1 {
        font-size: 30px;
    }

    .h3, h3 {
        font-size: 22px;
    }

    .h4, h4 {
        font-size: 18px;
    }
}

@media (min-width: 768px) {
    #play-video {
        width: calc(75vw);
        max-width: calc(100vh - 250px);
        height: auto;
    }

    #Arrow .my-svg {
        height: 1in;
        width: 1in;
    }

    .h1, h1 {
        font-size: 38px;
    }

    .h4, h4 {
        font-size: 18px;
    }
}

@media (min-width: 992px) {
    #play-video {
        width: calc(75vw);
        max-width: calc(100vh - 250px);
        height: auto;
    }

    .h1, h1 {
        font-size: 42px;
    }
}

@media (min-width:1200px) {
    #play-video {
        width: calc(75vw);
        max-width: calc(100vh - 250px);
        height: auto;
    }

    .h1, h1 {
        font-size: 50px;
    }
}

@media (min-width: 1400px) {
    #play-video {
        width: calc(75vw);
        max-width: calc(100vh - 250px);
        height: auto;
    }

    .h1, h1 {
        font-size: 56px;
    }
}


@keyframes to-right {
    from {
        opacity: 0;
        left: -100px;
    }

    to {
        opacity: 1;
        left: 0;
    }
}

@keyframes to-left {
    from {
        opacity: 0;
        left: 100px;
    }

    to {
        opacity: 1;
        left: 0;
    }
}

@keyframes to-top {
    from {
        top: 0;
    }

    to {
        top: -100px;
    }
}

@keyframes spin-pause {
    0% {
        transform: rotate(180deg);
    }

    7% {
        transform: rotate(300deg);
    }

    93% {
        transform: rotate(380deg);
    }

    100% {
        transform: rotate(540deg);
    }
}

@keyframes spin-pause-reverse {
    0% {
        transform: rotate(-180deg);
    }

    7% {
        transform: rotate(-300deg);
    }

    93% {
        transform: rotate(-380deg);
    }

    100% {
        transform: rotate(-540deg);
    }
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}