/* Mobile devices portrait ----------- */
@media (orientation: portrait) {

    a {
        text-decoration: none !important;
    }

    a:link {
        text-decoration: none !important;
    }

    a:visited {
        text-decoration: none !important;
    }

    a:hover {
        text-decoration: none !important;
    }

    a:active {
        text-decoration: none !important;
    }

    a:focus {
        text-decoration: none !important;
    }

    .appleLinks {
        text-decoration: none !important;
    }

    body {
        background-color: #f5f7f8;
    }

    .SAPlogo {
        position: fixed;
        top: 1vh;
        left: 2vh;
    }

    .home {
        position: fixed;
        top: 3vh;
        right: 3vw;
    }

    .imgHome{
        height: 5vw;
    }

    .imgSAPlogo {
        height: 8vw;
    }

    .ItForYoufooter {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
    }

    .imgChao {
        height: 25vh;
    }

    .imgNewHire {
        height: 35vw;
    }

    .Content {
        display: block;
        justify-content: center;
        margin: auto;
        border-radius: 25px;
        height: 100px;
        width: 50%;
        background-color: aqua;
    }

    .Centered {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15em;
        margin-left: -20em;
        width: 40em;
        height: 30em;
        background-color: white;
    }

    .CenteredFloating {
        height:83%;
        position: absolute;
        left: 0;
        bottom: 8vh;
        width: 100%;
        text-align: center;
        background-color: white;
        overflow: auto;
    }

    .Shadow {
        box-shadow: 0 0 20px 2px #cccccc;
        border-radius: 0px;
    }

    @font-face {
        font-family: "local72black";
        src: url(72-Black.ttf);
    }

    @font-face {
        font-family: "local72";
        src: url(72-Regular.ttf);
    }

    .imgLink {
        text-decoration: none;
    }

    h1 {
        font-size: 3.2vh;
        font-family: local72;
        margin: 2vh 2vh 0vh 2vh;
        text-align: center;
    }

    h2 {
        font-size: 2.5vh;
        font-family: local72;
        margin: 1vw 1vw 5vw 1vw;
    }

    h3 {
        font-size: 1.8vh;
        font-family: local72;
        font-weight: normal;
        margin: 1vh 2vh 1vh 2vh;
    }

    p {
        font-family: local72;
        font-size: 2.4vh;
        margin: 0vh 5vh 1vh 5vh;
    }

    p1 {
        font-family: local72;
        font-size:3vw;
        justify-self: center;
        margin: 0.5vw;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 1em;
        margin-inline-end: 1em;
        unicode-bidi: isolate;
    }

    footer {
        font-family: local72;
        font-size: large;
        display: block;
        margin-bottom: 2vw;
    }

    .imgProgress {
        height: 1.5vh;
        margin-top: 4vh;
    }

    .ContentSecondPageGrid {
        position: relative;
        display: contents;
    }

    .ContentPageGrid {
        position: relative;
        display: contents;
        /* top: 50%; */
        left: 50%;
        /* margin-top: -15em; */
        margin-left: -22em;
        width: 46em;
        height: 30em;
    }

    .imgContent {
        height: 25vh;
    }

    .slide1HeadImg {
        height: 20vh;
    }

    .ContentFirstPageGrid {
        padding-top: 1vw;
        display: block;
    }

    .ContentLastPageGrid {
        position: relative;
        display: contents;
    }

    .ContentLastPageInnerGrid {
        display: grid;
    }

    .contentNewHireGrid {
        position: relative;
        display: contents;
    }

    .contentNewHiresInnerGrid {
        display: grid;
    }

    .ContentFirstPageInnerGrid {
        display: table;
    }

    .ContentExistingPagesGrid {
        position: relative;
        display: contents;
    }

    .ContentExistingPagesInnerGrid {}

    .imgFooter {
        height: 3vh;
    }

    .ButtondFooter {
        display: flex;
        flex-direction: row;
    }

    .ButtonLeft {
        border: 0px;
        height: 12vw;
        transition: 0.2s;
        filter: drop-shadow(3px 3px 3px #888888);
        position: absolute;
        bottom: 1.5vw;
        right: 15vw;
    }

    .ButtonLeft:hover {
        border: 0px;
        cursor: pointer;
        filter: drop-shadow(0px 0px 0px #888888);
    }


    .ButtonRight {
        border: 0px;
        height: 12vw;
        transition: 0.2s;
        filter: drop-shadow(3px 3px 3px #888888);
        position: absolute;
        bottom: 1.5vw;
        right: 2vw;
    }

    .ButtonRight:hover {
        border: 0px;
        cursor: pointer;
        filter: drop-shadow(0px 0px 0px #888888);
    }

    .blueBoxParent {
        display: flex;
        flex-direction: column;
        grid-row-gap: 100px;
        justify-content: center;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .verticalCenter {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        left: 50%;
        top: 50%;
    }

    .blueBox {
        background-color: #0070F2;
        border-radius: 10px;
        width: 25vh;
        height: 15vh;
        box-shadow: 3px 3px 6px 3px rgba(100, 100, 100, 1);
        transition-property: box-shadow;
        transition: 0.2s;
        display: flex;
    }

    .blueBox:hover {
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(100, 100, 100, 1);
    }

    span {
        font-size: 2.5vh;
        margin: 1vh 5vh 1vh 5vh;
        font-family: local72;
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .margin10 {
        margin: 10px 10px 10px 10px;
    }
}