.PageHeadings {
    grid-row: 1/2;
    grid-column: 1/ 13;
    margin: 0 0 0 0;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, minmax(.6rem, 9rem));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    color: #FFFFF0;
}
.startbuttons-div {
    grid-column: 1/13;
    grid-row: 2/3;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.starttop-div {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    height: auto;
    padding: .3rem 0 0 0;
}


.top-container {
    --primary-font: 'LibreFranklin-Light', Arial, Helvetica, sans-serif;
    --secondary-font: "Big Shoulders Display", sans-serif;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width:50rem;
    margin: 0 auto;
    padding:.5rem 1.0rem;
    background: rgba(80, 100, 120, .7);
    border-radius: .3rem;
}


.CIATPS h3 {
    grid-column: 3/11;
    grid-row: 1/2;
    font-family: var(--secondary-font);
    color: #FFF;
    font-size: 2.0rem;
    margin: 0;
}

.PageHeadings p {
    grid-column: 1/13;
    grid-row: 2/3;
    font-optical-sizing: auto;
    color: #f1ede1;
    padding: 0;
    line-height: 1.2;
     font-size: .9rem;
    margin: 0 0 1rem 0;
}


.CIATPS {
    width: 100%;
    /* border: solid thin #eee;*/
    display: grid;
    grid-template-columns: repeat(12, minmax(.6rem, 9rem));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    margin: 0 0 2.0rem 0;
}

.Page-icon {
    grid-column: 1/3;
    grid-row: 1/2;
    height: 4rem;
    aspect-ratio: 21/13;
    object-fit: scale-down;
}

.linkbutton {
    grid-column: 1/2;
    grid-row: 3/4;
    justify-self: left;
    align-content: center;
    align-items: center;
    height: 1.5rem;
    width: 6rem;
    border-radius: .1rem;
    z-index: 100;
    color: #113250;
    border: none;
    opacity: .5;
    font-size: .9rem;
    background-color: #FFFFF0;
    /*    box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.75), .1rem .1rem .3rem 0 rgba(0,0,0,0.75);*/ 
    box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.75), .1rem .1rem .5rem 0 rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    padding: 0;
    margin:0 0 .1rem 0;
}

    .linkbutton:hover {
        text-decoration: underline;
        border:solid thin gray;
    }


hr {
    grid-column: 5/9;
    grid-row: 4/5;
    height: 1px;
    align-self: end;
    margin: 0;
    padding: 0;
    width: 100%;
}

.PageHeadings h1 {
    grid-column: 1/13;
    grid-row: 1/2;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 0 .5em 0 .5em;
    margin: 0 .2rem 0 .2rem;
}

.PageHeadings h2 {
    margin: 0;
    font-weight: normal;
    color: #FFFFF0;
    /*text-shadow: .1rem .1rem .1rem #111;*/
}


/*  .PageHeadings h2 {
        font-weight: normal;
        max-width: 60ch;
        margin: 0rem auto 0 auto;
        text-align: center;
        text-shadow: .1px .1px .1px #111;
    }*/

/*.PageHeadings h3 {
    font-weight: normal;
    max-width: 60ch;
    margin: 0rem auto 0 auto;
    text-align: center;
    text-shadow: .1px .1px .1px #111;
}
*/
.PageHeadings h4 {
    font-weight: normal;
    max-width: 60ch;
    margin: 0 auto 0 auto;
    text-align: center;
    text-shadow: .1px .1px .1px #111;
}


.PageHeadings h5 {
    font-weight: normal;
    max-width: 60ch;
    margin: 0 auto 0 auto;
    text-align: center;
    text-shadow: .2px .2px .2px #111;
}



.PageHeadings h6 {
    font-weight: normal;
    max-width: 60ch;
    margin: .5rem auto 0 auto;
    text-align: center;
}

.PageHeadings p {
    text-align: center;
    max-width: 70ch;
    margin: 0 auto;
    width: auto;
    text-shadow: .1px .1px .1px #000;
}

.start-button {
    grid-column: 6/7;
    grid-row: 1/2;
    align-self: center;
    align-content: center;
    height: 3.0rem;
    width: auto;
    aspect-ratio: 21/13;
    margin: 0 auto 0 auto;
    background-color: #FFFFF0;
    border: solid 1px #FFFFF0;
    border-radius: .3rem;
    background-position: center top;
    background-image: url('../Images/Runway_clouds_small.png');
    background-repeat: no-repeat;
    background-size: 120%;
    z-index: 100;
    box-shadow: -.2rem -.2rem .2rem #000 inset, .1rem .1rem .1rem #aaa inset;
    color: #113250;
    font-size: 1.0rem;
    margin: .5rem;
}

    .start-button:hover {
        /* box-shadow: -.2rem -.2rem .2rem #000 inset, .1rem .1rem .1rem #aaa inset, .2rem .2rem .2rem #000;*/
        background-position: center top;
        background-image: url('../Images/A320_landing_xparent.png'), url('../Images/Runway_clouds_small.png');
        background-blend-mode: multiply;
        background-repeat: no-repeat;
        background-size: 120%;
        cursor: pointer;
    }

/*============= Selected by function StartButton(b) Defautl_Page.js =========================*/

.start-button-selected {
    align-self: center;
    align-content: center;
    height: 3.0rem;
    width: auto;
    aspect-ratio: 21/13;
    margin: 0 auto 1rem auto;
    box-shadow: 1px 1px 1px 1px #FFFFF0;
    background-position: center top;
    background-image: url('../Images/A320_landing.png'), url('../Images/Runway_clouds_small.png');
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: 120%;
    z-index: 100;
    border: solid thin #314c65;
    animation: startbutton 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.startlogo-loginstatus {
    align-content: center;
    align-self: center;
    text-align: center;
    height: 3.0rem;
    width: auto;
    aspect-ratio: 21/13;
    background-color: ivory;
    border: solid 1px #FFFFF0;
    border-radius: .3rem;
    background-image: url('../Images/Sign_In_black.Xparent.png');
    background-repeat: no-repeat;
    background-size: 22%;
    background-position: 50% 5%;
    z-index: 100;
    box-shadow: -.2rem -.2rem .2rem #000 inset, .1rem .1rem .1rem #aaa inset;
    color: #113250;
    font-size: 1.0rem;
    margin: .5rem;
}

    .startlogo-loginstatus:hover {
        color: #113250;
        border-radius: .3rem;
        box-shadow: -.2rem -.2rem .2rem #000 inset, .1rem .1rem .1rem #aaa inset;
        font-weight: bold;
        text-decoration: none;
    }

    .startlogo-loginstatus:active {
        background-color: ivory;
        color: #113250;
        border-radius: .2rem;
        border: solid 1px #FFFFF0;
        box-shadow: -.2rem -.2rem .2rem #aaa inset, .2rem .2rem .2rem #111 inset;
        animation: startbutton 2s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
        opacity: .5;
    }



.Courses {
    background-position: center center;
    grid-column: 1/13;
    grid-row: 5/6;
    width: 100%;
    padding: .5rem .5rem .5rem .5rem;
    margin: 0 auto .2rem auto;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border-radius: .5em;
    overflow: hidden;
    text-align: center;
    border-bottom: solid thin #333;
    opacity: 1;
    /*background-color: rgba(85,105,122,.3);*/
}


/*.Courses h3:hover {
            box-shadow: -.1rem -.1rem .1rem #000 inset, .1rem .1rem .1rem #aaa inset, .2rem .2rem .4rem #000;
            cursor: pointer;
            background-color: #113250;
            opacity: .5;
        }*/

        .courselist ul > li:nth-of-type(1) h3 {
            animation-name: Courses_Animation_main;
            animation-duration: 1s;
            animation-delay: .5s;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in;
        }

        .courselist ul > li:nth-of-type(2) h3 {
            animation-name: Courses_Animation_main;
            animation-duration: 1s;
            animation-delay: .7s;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in;
        }

        .courselist ul > li:nth-of-type(3) h3 {
            animation-name: Courses_Animation_main;
            animation-duration: 1s;
            animation-delay: .9s;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in;
        }

        .courselist ul > li:nth-of-type(4) h3 {
            animation-name: Courses_Animation_main;
            animation-duration: 1s;
            animation-delay: 1.1s;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in;
        }


        .courselist ul > li:nth-of-type(5) h3 {
            animation-name: Courses_Animation_main;
            animation-duration: 1s;
            animation-delay: 1.3s;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in;
        }


@keyframes Courses_Animation_main {
    from {
        opacity: 0;
        transform: scale(.1,.1);
    }

    to {
        opacity: 1.0;
        transform: scale(1,1);
    }
}



.card-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 19rem));
    justify-content: space-evenly;
    justify-items: center;
    gap: .2rem;
    /* opacity: 1;*/
}

.card {
    display: grid;
    grid-template-rows: subgrid; /*subgrid*/
    grid-row: span 5;
    gap: 0;
    border-radius: 0.5rem;
    padding: .3rem;
    background-color: ivory;
    margin: .2rem auto .2rem auto;
    opacity: 1;
    box-shadow: -1px -1px 5px 1px #113250 inset, 1px 1px 5px 1px #314c65 inset;
    border: solid thin white;
}

    .card ul {
        margin: 0;
        padding: 0;
        padding: .5rem;
    }

        .card ul li {
            text-align: left;
            margin: 0 0 0 .5rem;
            padding: .5rem;
            color: #000;
            line-height: 1.1;
            font-weight: normal;
        }

    .card h3 {
        margin: .5rem 0 .5rem 0;
        font-weight: bold;
        color: #113250;
    }

    .card h4 {
        margin: .5rem 0 0 0;
    }

    .card:first-child {
        opacity: 0;
        animation-name: slideright;
        animation-duration: 2s;
        animation-delay: 5s;
        animation-fill-mode: forwards;
        align-content: center;
    }

    .card:nth-child(2) {
        opacity: 0;
        animation-name: slideright;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
    }

    .card:nth-child(3) {
        opacity: 0;
        animation-name: zoom;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards;
    }

    .card:nth-child(4) {
        opacity: 0;
        animation-name: slideleft;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
    }

    .card:nth-child(5) {
        opacity: 0;
        animation-name: slideleft;
        animation-duration: 2s;
        animation-delay: 5s;
        animation-fill-mode: forwards;
    }

.logo_image {
    background-position: center center;
    height: auto;
    width: 5rem;
    border-radius: .3rem;
    margin: 0 auto 0 auto;
    opacity: .3;
}


/*.Courses p:nth-of-type(1) {
    opacity: 0;
    max-width: 60ch;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #113250;
    padding: .3rem;
    animation-name: Courses_Animation_main;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    overflow: hidden;
    border: none;
    text-align: center;
}
*/ /*
.Courses p:nth-of-type(2) {
    margin: .2rem;
    padding: .5rem;
}
*/

/*.myline {
    color: #888;
    margin: 0;
    height: auto;
    display: flex;
    justify-content: center;
    align-content: start;
    align-items: start;
    padding: 0 0 .6rem 0;
    animation-name: Courses_Animation_main;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: .1;
}
*/
.quicktest {
    opacity: 0;
    display: block;
    width: auto;
    max-width: 50ch;
    height: 1rem;
    margin: .5em auto 0 auto;
    padding: 1rem;
    border-radius: .1em;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: .6rem;
    text-decoration: underline;
    animation-name: Courses_Animation_H3;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-delay: 7s;
    color: #113250 !important;
}

    .quicktest:hover {
        opacity: 1.0;
        box-shadow: -.2rem -.2rem .2rem #000 inset, .1rem .1rem .1rem #aaa inset, .2rem .2rem .2rem #000;
        cursor: pointer;
    }


@keyframes Courses_Animation_courses {
    0% {
        opacity: 0;
        transform: scale(.1,.1);
    }

    20% {
        opacity: .2;
    }

    70% {
        opacity: .6;
        transform: scale(1.0);
    }

    100% {
        opacity: 1.0;
    }
}


@keyframes Courses_Animation_H3 {
    0% {
        transform: scale(.2,.2) translate(0px, 0px);
        opacity: 0;
    }

    100% {
        transform: scale(1,1) translate(0px, 0px);
        opacity: 1.0;
    }
}

.button-thispage {
    align-self: center;
    align-content: center;
    height: 4rem;
    width: auto;
    aspect-ratio: 21/13;
    margin: 0 auto 1rem auto;
    background-color: #FFFFF0;
    border: solid 1px #FFFFF0;
    border-radius: .3rem;
    z-index: 100;
    box-shadow: -.2rem -.2rem .2rem #000 inset, .1rem .1rem .1rem #aaa inset;
    color: #113250;
}


.CIATPS2 {
    width: 100%;
    height: auto;
    grid-row: 2/3;
    grid-column: 1/ 13;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    grid-auto-rows: auto;
    gap: .3em;
    justify-content: space-around;
    justify-items: center;
    align-items: start;
    align-content: start;
    margin: 1rem 1rem 1rem 1rem;
}

.Grid-Item {
    position: relative; /*for absolute positions*/
    justify-content: center;
    align-content: start;
    width: 100%;
    aspect-ratio: 21/13;
    border-radius: .3rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(.3rem, 12rem));
    grid-template-rows: auto;
    background-color: #f0ede0;
    border-bottom: solid thin #333;
    border: solid thin white;
    margin: .2rem auto .2rem auto;
    /* opacity: .8;*/
    box-shadow: -1px -1px 5px 1px #113250 inset, 1px 1px 5px 1px #314c65 inset;
}

    .Grid-Item:hover {
        box-shadow: -4px -4px 10px 2px #113250 inset, 4px 4px 10px 2px #314c65 inset;
        /* box-shadow: -4px -4px 10px 1px #ff0000 inset;*/
    }

    .Grid-Item > H2 {
        grid-column: 1/13;
        grid-row: 1/2;
        margin: 0;
        margin-top: .3rem;
        min-height: 5.0rem;
        padding: .5rem;
        padding-bottom: 0;
        font-weight: normal;
    }

    .Grid-Item > H3 {
        grid-column: 1/13;
        grid-row: 1/2;
        margin: .5rem 0 .3rem 0;
        padding: .5em 0 0 0;
        font-weight: bold;
        line-height: 1.2;
    }

    .Grid-Item > H4 {
        grid-column: 1/13;
        grid-row: 1/2;
        margin: 0;
        margin-top: .2rem;
        margin-bottom: .2rem;
        min-height: 3.0rem;
        padding: .2rem;
        padding-bottom: 0;
        font-weight: normal;
    }

    .Grid-Item > p {
        grid-column: 6/13;
        grid-row: 2/5;
        width: 100%;
        justify-self: center;
        align-self: center;
        margin: 0;
        margin-top: .2rem;
        margin-bottom: .2rem;
        min-height: 3.0rem;
        padding: 0 .5rem .5rem .5rem;
        padding-bottom: 0;
        font-weight: normal;
        line-height: 1.1;
        font-size: 90%;
        overflow-y: auto;
    }

.span-details {
    grid-column: 1/13;
    grid-row: 6/7;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1.5rem;
    text-align: center;
    font-size: .6rem;
    margin: 0;
    background-color: #314c65;
    color: ivory;
    padding: .3rem;
    border-radius: .4rem 0 .4rem 0;
}



.Grid-image-div {
    background-position: center center;
    grid-column: 1/6;
    grid-row: 2/5;
    margin-top: 0;
    width: 90%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: .4rem;
    opacity: .7;
    overflow: hidden;
}




.image_PPL {
    background-image: url('../Images/Cessna172_2BW.png'), url('../Images/Mysky02_xparent.jpg');
}

.image_CPL {
    background-image: url('../Images/KingAir.png'), url('../Images/Mysky02_xparent.jpg');
}

.image_INT {
    background-image: url('../Images/Boeing737.png'), url('../Images/Mysky02_xparent.jpg');
}

.image_ATP {
    background-image: url('../Images/airbus-A320-001.png'), url('../Images/Mysky02_xparent.jpg');
}

.image_IR {
    background-image: url('../Images/Instrument_panel_sepia.png');
}


.Floated_div {
    grid-column: 1/3;
    grid-row: 2/4;
    align-self: start;
    align-content: start;
    height: 7rem;
    overflow: auto;
}

    .Floated_div p {
        font-size: 90%;
        color: #113250;
        line-height: .9;
        margin: 0;
        padding: 0 .5rem .3rem 0;
        height: 80%;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: black white;
        scrollbar-width: thin;
    }

        .Floated_div p:hover {
            scrollbar-color: maroon white;
            scrollbar-width: thin;
        }

.PPL-image {
    background-position: center center;
    background-image: url('../Images/Cessna172_2BW.png'), url('../Images/Mysky02_xparent.jpg');
    background-blend-mode: multiply;
    margin-left: .2rem;
}

.INT-image {
    background-image: url('../Images/airbus-A320-001.png'), url('../Images/Mysky02_xparent.jpg');
    background-blend-mode: multiply;
    margin-left: .2rem;
}

.IR-image {
    background-image: url('../Images/Instrument_panel_sepia.png');
    background-blend-mode: multiply;
    margin-left: .2rem;
}


.span-details:hover {
    cursor: pointer;
    box-shadow: .1rem .3rem .3rem .1rem #444;
    background-color: #f0ede0;
    color: #113250;
}

.span-details:active {
    cursor: pointer;
    box-shadow: inset .1rem .1rem .2rem .1rem #aaa;
}



@keyframes enlarge {
    0% {
        background-position: 50% 0%;
        background-size: 0%;
        opacity: 0;
    }

    50% {
        opacity: .2;
    }

    100% {
        background-position: center center;
        background-size: 10%;
        opacity: 1.0;
    }
}

@keyframes enlarge_smaller {
    0% {
        background-position: 50% 0%;
        background-size: 0%;
        opacity: 0;
    }

    50% {
        opacity: .2;
    }

    100% {
        background-position: 50% 1%;
        background-size: 15%;
        opacity: 1;
    }
}


@keyframes enlarge_larger {
    0% {
        background-position: 50% 0%;
        background-size: 0%;
        opacity: 0;
    }

    50% {
        opacity: .2;
    }

    100% {
        background-position: 50% 1%;
        background-size: 30%;
        opacity: 1;
    }
}




@keyframes enlarge-right {
    0% {
        background-size: 0%;
        background-position: 60% 20%;
    }

    100% {
        background-position: 50% -5%;
        background-size: 30%;
    }
}


@keyframes enlarge-IR {
    0% {
        background-size: 0%;
        background-position: 50% 20%;
    }

    100% {
        background-position: 50% 0%;
        background-size: 10%;
    }
}

.top_info {
    width: 100%;
    padding: 0 .2rem 0 .2rem;
    grid-row: 3/4;
    grid-column: 1/ 13;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
    align-content: start;
    box-shadow: .1rem .1rem .3rem .1rem #aaa;
    /*background-blend-mode: multiply;*/
    margin-top: 0;
    background-color: rgba(255, 255, 240, .5);
}

.Ul-list {
    height: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(.5rem, 8rem));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    margin: 0;
}

.Div-images {
    height: auto;
    min-height: 80vh;
    display: grid;
    grid-template-columns: repeat(12, minmax(.5rem, 8rem));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    margin: 0;
    /*  background-color: rgba(240,240,225,.5);*/
    /* border: solid medium yellow;*/
}

.Ul-list-header {
    width: 100%;
    grid-column: 1/13;
    grid-row: 1/2;
    padding: 1rem 0 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    height: auto;
    font-weight: normal;
    /*  background-color: rgba(240,240,225,1);*/
    /*background-color: rgba(240, 240, 220, .7);*/
}


    .Ul-list-header h3 {
        width: 100%;
        text-align: center;
        border-style: none;
        font-weight: normal;
        margin: 1rem 0 1rem 0;
        opacity: 1.0;
        color: black;
        font-weight: bold;
        line-height: 1.2;
    }


    .Ul-list-header p {
        width: 100%;
        display: block;
    }


.ul-this {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}


.Ul-list > ul {
    width: 100%;
    grid-row: 3/4;
    grid-column: 1/ 13;
    list-style-type: none;
    margin: 0 auto 0 auto;
    padding: 0;
    /* background-color: rgba(240, 240, 220, .7);*/
}

    .Ul-list > ul h3 {
        width: 100%;
        height: auto;
        border-style: none;
        text-align: center;
        color: #000;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        text-decoration: underline;
        background: none;
    }

        .Ul-list > ul h3:hover {
            cursor: pointer;
            box-shadow: 2px 2px 2px 1px #444;
            background-color: #113250;
            color: ivory;
        }


    .Ul-list > ul li {
        width: 100%;
        height: auto;
        margin: 0;
        position: relative;
        padding: .5rem;
        min-height: 3rem;
        text-align: center;
        border-radius: .3rem;
    }


        .Ul-list > ul li p {
            text-align: left;
            padding-left: 2rem;
            max-width: 60ch;
            margin: .5rem 0 .5rem .5rem;
        }

        .Ul-list > ul li::marker {
            color: #f1ede1;
            margin: 0;
            padding: 0;
            text-align: left;
        }


.Ul-list a {
    width: 100%;
    display: inline-block;
    text-align: center;
    color: #000;
    text-decoration: underline;
}

    .Ul-list a:hover {
        cursor: pointer;
        box-shadow: 2px 2px 2px 1px #444;
        background-color: #113250;
        color: ivory;
    }


.slideshow-caption-container {
    width: 100%;
    align-content: center;
    align-items: center;
    height: 4.45rem;
    font-weight: normal;
    display: flex;
    justify-content: center;
    background-color: rgba(240, 240, 225, 1);
    position: relative;
    padding: .5rem;
    /*border:solid medium red;*/
}

    .slideshow-caption-container p {
        max-width: 70ch;
    }


.slideshow-container {
    grid-row: 1/2;
    grid-column: 1/ 13;
    width: 100%;
    max-height: 90%;
    align-self: start;
    margin: 0;
    padding: 0;
    justify-self: center;
    margin-right: .3rem;
    /* background-color: rgba(240,240,225, .5);*/
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(.5rem, 8rem));
    grid-template-rows: auto;
    margin: 0;
    opacity: .8;
}

    .slideshow-container img {
        width: 100%;
        margin-top: 0;
        box-shadow: 1px 1px 8px 2px #113250;
        background-color: #f1ede0;
        border-radius: 0 0 .5rem .5rem;
    }

.dots {
    grid-column: 1/13;
    grid-row: 1/2;
    text-align: center;
    height: 5.0rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    /*border: solid medium maroon;*/
}

.slide {
    display: block;
    aspect-ratio: 21/13;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    padding-top: 0;
}

    .slide p {
        text-align: center;
    }



    .slide > img {
        width: 100%;
        height: auto;
        /* max-height: 90%;*/
        object-fit: contain;
    }





.caption-logo {
    text-align: center;
    align-self: center;
    background-size: cover;
    height: 5rem;
}


.moveup {
    position: relative;
    top: -6rem;
    z-index: 500;
}




.thiswidth {
    width: 20%;
}


.Consent-text {
    position: absolute;
    top: 15%;
    left: 20%;
    right: 20%;
    width: auto;
    height: 80vh;
    border-radius: 1vw;
    border: solid thin black;
    box-shadow: 2px 2px 2px darkgray;
    text-align: center;
    padding-top: 5vh;
    z-index: 500;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #f1ede1;
    background-image: url('../Images/Mysky.png');
    background-blend-mode: multiply;
}

    .Consent-text img {
        height: 5rem;
        grid-row: 1/2;
        grid-column: 1/4;
    }

    .Consent-text h3 {
        background-color: #ddd;
        padding: 0;
        padding-left: 2vw;
        padding-right: 2vw;
        text-shadow: 1px 1px white;
    }

    .Consent-text p {
        padding: 0;
        padding-left: 2vw;
        padding-right: 2vw;
    }

.Cookietext {
    background-color: #314c65;
    color: white;
    width: 70%;
    aspect-ratio: 21/12;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    border-radius: .3rem;
}

    .Cookietext a {
        color: white;
        text-decoration: underline;
        padding-left: 1rem;
    }

        .Cookietext a:hover {
            color: #314c65;
            background-color: ivory;
            text-decoration: underline;
            padding-left: 1rem;
        }



.images-various {
    height: 5rem;
    width: auto;
    margin-bottom: 16px;
}



.header-text {
    grid-row: 3/4;
    grid-column: 1 / 13;
    text-align: left;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 0;
    padding: 1rem;
    color: black;
    background-color: #f1ede1;
    height: auto;
}

.main-info-div {
    grid-row: 7/8;
    grid-column: 1/13;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0;
}



.div_options {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 10% 75% 15%;
    margin: 0;
    border: thin solid #333;
    text-align: center;
    border-radius: .3vw;
    width: 32%;
    height: 100%;
    aspect-ratio: 21/13;
    border-radius: 5px;
    background: rgba(255, 255, 240, 1);
    padding: 0;
    margin: 0;
    box-shadow: .1rem .1rem .1rem .1rem black, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
    overflow: auto;
    border: solid thin white;
}

    .div_options:hover {
        box-shadow: -.1rem -.1rem 1rem #113250 inset, .1rem .1rem .2rem #113250 inset;
        cursor: pointer;
    }

    .div_options > h2 {
        grid-column: 1/4;
        grid-row: 1/2;
        width: auto;
        align-self: center;
        text-align: center;
        height: 3rem;
        margin-top: .5rem;
    }

    .div_options > h3 {
        grid-column: 1/13;
        grid-row: 1/2;
        width: auto;
        align-self: center;
        text-align: center;
        height: 2.5rem;
        margin: 1.0rem 0 0 0;
        font-weight: bold;
        color: #113250;
    }

    .div_options img {
        width: 30%;
        height: auto;
        margin: .5rem;
        aspect-ratio: 21/13;
        border-radius: 5px;
        object-fit: contain;
        float: left;
        background-color: #546a7c;
        background-image: url('../Images/Mysky.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: lighten;
        box-shadow: .1rem .1rem .1rem .1rem black, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
    }

    .div_options > p {
        width: 100%;
        grid-row: 2/3;
        grid-column: 1/13;
        align-self: start;
        text-align: left;
        padding: 1.0rem;
        padding-top: 0;
        height: 100%;
        max-height: 100%;
        overflow: auto;
    }

.div_options_add {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 10% 75% 15%;
    background-color: #f1ede1;
    box-shadow: .1rem .1rem .2rem black, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
    overflow: auto;
    color: #113250;
    width: 50%;
    min-height: 80vh;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    overflow: auto;
    background-image: linear-gradient(rgba(241,237,225, .8) 0%,rgba(241,237,225, .8) 100%), url('../Images/Mysky.png');
    background-repeat: no-repeat;
    background-attachment: initial;
    background-size: cover;
    background-position: center center;
}

    .div_options_add > * {
        color: #113250;
    }

.freePPL {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}



.img-exit {
    display: none;
    grid-row: 1/2;
    grid-column: 12/13;
    justify-self: right;
    aspect-ratio: 21/13;
    width: 90%;
    font-weight: bold;
    color: ivory;
    background-color: #546a7c;
    border: none;
    margin: .3rem;
    border-radius: .2em;
    box-shadow: 1px 1px 1px #314c65 inset, -2px -2px 3px #113250 inset;
    opacity: .7;
}

    .img-exit:hover {
        /* box-shadow: -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;*/
        box-shadow: 1px 1px 1px #FFFFF0 inset, -2px -2px 3px #113250 inset;
        cursor: pointer;
    }


.opacity00 {
    opacity: 0;
    /* border: solid thick blue;*/
}

.opacity01 {
    opacity: 1.0;
    /*  border: solid thick red;*/
}

.container_options_add {
    /*background-color: ivory;*/
    box-shadow: .1rem .1rem .2rem .2rem black, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
    opacity: 1.0;
    border: none;
    overflow: auto;
}

.button-return {
    /*height: 4.5rem;
    width: auto;
    aspect-ratio: 21/13;
    margin: 0 auto 1rem auto;
    background-color: #f1ede1;
    border: solid 1px #FFFFF0;
    border-radius: .3rem;*/
    background-image: url('../Images/LOGO_BW_NOTEXT.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: 2px 2px;
    background-position: center top;
    z-index: 100;
    /*color: #314c65;
    box-shadow: -.1rem -.1rem .1rem #000 inset, .1rem .1rem .1rem #888 inset;*/
}

    .button-return:hover {
        box-shadow: -.2rem -.2rem .2rem #000 inset, .1rem .1rem .1rem #aaa inset, .2rem .2rem .2rem #000;
        cursor: pointer;
    }

.buttons-ppl {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}

.buttons-cpl {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}

.buttons-atpl {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}

.buttons-blank {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}

.buttons-int {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: sans-serif;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}

.buttons-ir {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}

.buttons-mock {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}

.buttons-flag {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    /*border: solid thick orange;*/
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}

.buttons-search {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: center;
    font-family: sans-serif;
}


.Buttons-bottom {
    width: 30%;
    aspect-ratio: 21/8;
    height: 2.0rem;
    font-size: .7rem;
    padding: .2em;
}

.button-subs {
    height: auto;
    width: 30%;
    aspect-ratio: 21/8;
    text-align: center;
    background-color: #f1ede1;
    color: #113250;
    border: none;
    opacity: 0;
    box-shadow: .1rem .1rem .1rem .1rem black, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
    overflow: visible;
    align-self: end;
    align-content: center;
    margin: .3rem;
}

    .button-subs:hover {
        background-color: #113250;
        color: white;
    }

.button-quicktest {
    height: auto;
    width: 30%;
    aspect-ratio: 21/8;
    text-align: center;
    background-color: #f1ede1;
    color: #113250;
    border: none;
    opacity: 0;
    box-shadow: .1rem .1rem .1rem .1rem black, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
    overflow: visible;
    align-self: end;
    align-content: center;
    margin: .3rem;
}

    .button-quicktest:hover {
        background-color: #113250;
        color: white;
    }

.button-login {
    height: auto;
    width: 30%;
    aspect-ratio: 21/8;
    text-align: center;
    background: #f1ede1;
    color: #113250;
    border: none;
    opacity: 0;
    box-shadow: .1rem .1rem .1rem .1rem black, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
    overflow: visible;
    align-self: end;
    align-content: center;
    margin: .3rem;
}

    .button-login:hover {
        background-color: #113250;
        color: white;
    }

.color-ivory {
    width: 100%;
    color: ivory;
}

/*  .buttons-ppl >*:last-child {
       border:thick solid red;
    }*/


.buttons-quicktest {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: sans-serif;
}

.buttons-flex {
    grid-column: 1/13;
    grid-row: 3/4;
    width: 100%;
    /*border: solid thick orange;*/
    display: flex;
    justify-content: space-between;
    font-family: sans-serif;
}




.showthis {
    opacity: .7;
    /*  background-color:red;*/
}


.meeting {
    grid-row: 9/10;
    grid-column: 1/13;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 16px;
}

    .meeting img {
        width: 55%;
        height: auto;
        filter: sepia();
    }

.database-info {
    grid-row: 6/7;
    grid-column: 1/13;
    width: 100%;
    height: auto;
    background-color: #113250;
    padding: 1rem 0 1rem 0;
    text-align: center;
    color: #FFFFF0;
    opacity: .7;
}


    .database-info h3 {
        margin: 1rem auto 1rem auto;
        width: 100%;
        text-align: center;
        color: ivory;
        background-color: #113250;
        font-weight: normal;
        max-width: 80ch;
    }


.resources {
    border-style: none;
    background-color: inherit;
    opacity: 1;
    height: 4rem;
}



.our_plans {
    grid-column: 1 / 13;
    grid-row: 8/9;
    margin: 1rem auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, minmax(.5rem, 5rem));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
}


.Button-top2 {
    grid-row: 1/2;
    grid-column: 1/13;
    z-index: 100;
    text-align: center;
}

.Button-top1 {
    z-index: 100;
}


.options2 {
    grid-row: 3/4;
    grid-column: 1 /13;
    width: 100%;
    margin: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 2rem;
}



.image_faq {
    background-position: center center;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    height: 6rem;
    aspect-ratio: 21/13;
    color: #f1f1f1;
    text-align: center;
    background-image: url('../Images/Mysky.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #f1ede1;
    border-radius: .3rem;
    box-shadow: .1rem .1rem .1rem .1rem gray, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
}

    .image_faq:hover {
        box-shadow: .2rem .2rem .2rem #000;
        cursor: pointer;
        background-color: #fffff0;
    }

.imagebutton {
    background-position: center center;
    margin: 1rem;
    height: 5rem;
    width: auto;
    aspect-ratio: 21/13;
    box-shadow: .1rem .1rem .1rem .1rem gray, -.1rem -.1rem .2rem gray inset, .1rem .1rem .2rem white inset;
    background-image: url('../Images/New_logo.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .imagebutton:hover {
        box-shadow: .2rem .2rem .2rem #000;
        cursor: pointer;
        background-color: #f1ede1;
    }

/*.button-contact:hover {
        box-shadow: -.2rem -.2rem .2rem #000 inset, .1rem .1rem .1rem #aaa inset, .2rem .2rem .2rem #000;
        cursor: pointer;
    }
*/

.button-cookie {
    background-position: center center;
    margin: 1rem;
    height: 6rem;
    width: auto;
    aspect-ratio: 21/13;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: .5rem;
}



.dropdown-faq *:nth-child(2) {
    font-weight: 600;
}


.faq_drop_menu {
    grid-column: 1/13;
    grid-row: 10/12;
    height: auto;
    width: 100%;
    padding-top: 1rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(.5rem, 5rem));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
    background-color: #314c65;
}

.button-contact {
    grid-row: 1/2;
    grid-column: 1/13;
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    margin-top: 1.0rem;
    height: 5rem;
    width: auto;
}

.timer {
    grid-row: 2/3;
    grid-column: 1/13;
    width: auto;
    height: auto;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(12, minmax(.5rem, 5rem));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
}

.time-display {
    width: 100%;
    grid-row: 2/3;
    grid-column: 1/13;
    height: 2rem;
    padding: 1rem 0 0 0;
    color: ivory;
}

.panel {
    grid-column: 1/13;
    grid-row: 4/5;
    opacity: 1;
    height: auto;
}


.Allpricing > div:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/2;
}

.Allpricing > div:nth-child(2) {
    grid-column: 3/5;
    grid-row: 1/2;
}

.Allpricing > div:nth-child(3) {
    grid-column: 5/7;
    grid-row: 1/2;
}

.Allpricing > div:nth-child(4) {
    grid-column: 7/9;
    grid-row: 1/2;
}

.Allpricing > div:nth-child(5) {
    grid-column: 9/11;
    grid-row: 1/2;
}
/*
use CSS input Masterpage.css
*/ /*#myBtn2 {
    position:absolute;
    width: auto;
    height: 2rem;
    top:6rem;
    left: .1rem;
    opacity: .1;
}
*/

/*================================ TRY BUTTON =============================*/




.sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
    background-color: #ddd;
    color: black;
}

.zoom-in {
    opacity: 0;
    animation: zoom 5s forwards; /*ease-in-out;*/ /*forwards;*/
    animation-delay: 5s;
}

.zoom-in-0 {
    opacity: 0;
    animation: zoom 2s forwards ease-in-out;
}

.zoom-cont {
    opacity: 1;
    animation: zoom-allover 10s, forwards, ease-out;
    animation-iteration-count: infinite;
    animation-delay: .5s;
    object-fit: cover
}

.zoom-banner {
    opacity: 1;
    animation: slideright 5s, forwards, ease-out;
    animation-iteration-count: 1;
    animation-delay: .5s;
    object-fit: cover
}

.zoom-banner2 {
    opacity: 0;
    animation: slideleft 5s, forwards, ease-out;
    /* animation-iteration-count: 1;*/
    animation-delay: .5s;
    object-fit: cover;
}

.fade-left {
    opacity: 1;
    animation: fade-left 2s, forwards, ease-out;
    animation-iteration-count: 1;
    animation-delay: .5s;
}

.fade-right {
    opacity: 1;
    animation: fade-right 2s, forwards, ease-out;
    animation-iteration-count: 1;
    animation-delay: .5s;
}



@keyframes zoom {
    0% {
        transform: scale(.1,.1) translate(0, 0);
        opacity: .1;
    }

    100% {
        transform: scale(1,1) translate(0, 0);
        opacity: 1.0;
    }
}

@keyframes zoom_CIATP {
    0% {
        transform: scale(.1,.1) translate(0px, 0px);
        opacity: 0;
    }
    /*
    50% {
        transform: scale(1.0,1.0) translate(0px, 0px);
        opacity: .3;
    }

    51% {
        transform: scale(1.5,1.5) translate(0px, 0px);
        opacity: 0;
    }*/


    100% {
        transform: scale(1,1) translate(0px, 0px);
        opacity: 1;
    }
}





@keyframes zoom-allover {

    0% {
        /* transform: scale(.4, .4) translate(-0px, 0px);
        opacity: 0;*/
        transform: scale(.1,.1); /*translate(0px, 0px);*/
        opacity: .5;
    }
    /*10% {
        transform: scale(1.2,1.2);*/ /*translate(-140px, 30px);*/
    /*opacity: .9;
    }*/

    40% {
        transform: scale(1.5,1.5); /*translate(0px, 0px);*/
        opacity: 1;
    }
    /*80% {*/
    /*transform: scale(3.0,3.0);*/ /*translate(0px, 0px);*/
    /*transform: scale(1.2,1.2);
        opacity: 1;
    }

    90% {
        transform: scale(1,1);*/ /*translate(0px, -100px);*/
    /*opacity: 1;
    }*/


    100% {
        /* transform: scale(.4, .4) translate(-0px, 0px);
        opacity: 0;*/
        transform: scale(1,1); /*translate(0px, 0px);*/
        opacity: 1;
    }
}




@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
        transform: scale(1,1) translate(10px, 10px);
    }

    to {
        opacity: 0;
        transform: scale(0,0) translate(0px, 0px);
        height: 0;
    }
}


@keyframes startbutton {
    from {
        opacity: 1;
        transform: scale(1,1);
    }

    to {
        opacity: .1;
        transform: scale(0,0);
    }
}


@keyframes fadein {
    from {
        opacity: .1;
    }

    to {
        opacity: 1;
    }
}


@keyframes slideright {

    0% {
        transform: translateX(-400%);
        opacity: .5
    }

    95% {
        transform: translateX(-1%);
    }

    100% {
        transform: translateX(0%);
        opacity: 1.0;
    }
}

@keyframes slideleft {
    0% {
        transform: translateX(400%);
        opacity: 0;
    }

    95% {
        transform: translateX(-1%);
    }

    100% {
        transform: translateX(0%);
        opacity: 1.0;
    }
}

@keyframes zoom_banner {
    0% {
        transform: scale(1,1) translate(0px, 0px);
        opacity: 0;
    }

    25% {
        transform: scale(1.3,1.3) translate(-140px, 10px);
        opacity: 1;
    }

    50% {
        transform: scale(1.3,1.3) translate(0px, 0px);
        opacity: 1;
    }

    75% {
        transform: scale(1.6,1.6) translate(130px, -30px);
        opacity: .5;
    }

    100% {
        transform: scale(1,1) translate(0px, -0px);
        opacity: .1;
    }
}

.timer h4 {
    margin: 0;
}

.greenborder {
    border: medium solid #008080;
    border-radius: 1vw;
    margin-top: 1vw;
    box-shadow: 2px 2px 5px 2px #008080;
}



.resources-menu {
    grid-column: 2/3;
    width: 100%;
}

.navigation-menu {
    float: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}



.nav-button {
    grid-column: 1/2;
    grid-row: 5/6;
    border: none;
    height: 1px;
    opacity: 0;
}

.nav-button2 {
    grid-column: 1/13;
    grid-row: 21/22;
    height: 64px;
    justify-self: center;
}

    .nav-button2:hover {
        cursor: pointer;
        background-color: #f1ede1;
    }

    .nav-button2:active {
        cursor: grabbing;
    }




.nav-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    color: black;
}


.Xparent {
    color: #555;
    background-image: none;
    background-color: transparent;
    font-weight: normal;
    text-shadow: 1px 1px 1px white;
    opacity: .7;
}



.ControlDiv {
    width: 100%;
    grid-column: 1/13;
    grid-row: 3/4;
}

.Cookietextbox {
    border-style: none;
    display: block;
    height: 5rem;
    opacity: 0;
}

.txtbox-loginstatus {
    width: 100%;
    opacity: 0;
    height: 2px;
}

.Loginstatus_div {
    color: black;
    padding: .5rem;
    text-decoration: none;
    display: block;
    z-index: 500;
    border: solid thin #333;
    border-radius: .3rem;
    margin-bottom: .2rem;
    background-color: #ffd171;
}

    .Loginstatus_div:hover {
        background-color: #f1ede1;
        cursor: pointer;
        box-shadow: 2px 2px 1px black;
    }

.show-menu {
    display: block;
    opacity: 1.0;
}


.top-of-page {
    width: 100%;
    position: fixed;
    top: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(.5rem, 4rem));
    grid-template-rows: 1rem;
    justify-content: center;
    justify-items: right;
    align-content: center;
    align-items: center;
}

    .top-of-page a {
        grid-column: 12/13;
        color: #FFFFFF;
        border: solid thin yellow;
    }


.shrink {
    border: none;
    box-shadow: none;
    animation-name: fadeout;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    /*height: 0;*/
}

.min-height {
    /*border: solid thick blue;*/
}

.fade-out {
    animation-name: fadeout;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}


.resources_drop_menu {
    grid-column: 1 / 13;
    grid-row: 9/10;
    display: grid;
    grid-template-columns: repeat(12, minmax(.5rem, 8rem));
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
    border-style: solid solid none solid;
    border-width: thin;
    border-color: #333;
    margin: 0;
    padding-top: 2rem;
    border: thin solid black;
    background-color: #113250;
    width: 100%;
    color: white;
    opacity: .7;
}

    .resources_drop_menu a {
        width: 100%;
        height: 10rem;
        text-align: center;
    }

    .resources_drop_menu p {
        grid-row: 5/6;
        grid-column: 1/13;
        width: 100%;
        text-align: center;
        margin-bottom: 1rem;
    }

    .resources_drop_menu h2 {
        grid-row: 4/5;
        grid-column: 1/13;
        text-align: center;
        margin: 1.0rem;
        color: ivory;
        margin: .5rem;
    }


.image_info {
    background-position: center center;
    grid-row: 1/2;
    grid-column: 6/8;
    height: 6rem;
    aspect-ratio: 21/13;
    background-image: url('../Images/Information.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #f1ede1;
    border-radius: .3rem;
    padding: .5rem;
}

    .image_info:hover {
        box-shadow: .2rem .2rem .2rem #333;
        background-color: #f1f1f1;
    }



.resources_nav {
    grid-row: 1/2;
    grid-column: 2/3;
    display: inline-block;
}





.Resources-content1 {
    grid-column: 1/13;
    grid-row: 8/9;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 auto .5rem auto;
    justify-content: center;
    justify-items: center;
    gap: .2rem;
}

    .Resources-content1 > * {
        border: solid thin #333;
        object-fit: scale-down;
        width: 10rem;
        aspect-ratio: 21/13;
        height: auto;
        background-color: #f1ede1;
        color: black;
        text-align: center;
        background-position: bottom center;
    }

    .Resources-content1 * {
        color: black;
    }


.mySlides {
    grid-row: 2/3;
    grid-column: 1/13;
    align-self: start;
    display: none;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

/* Next & previous buttons */
.prev {
    align-self: center;
    text-align: center;
    cursor: pointer;
    width: 4rem;
    padding: 0;
    color: #113250;
    font-weight: bold;
    font-size: 2rem;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: inherit;
}

.next {
    align-self: center;
    text-align: center;
    cursor: pointer;
    width: 4rem;
    padding: 0;
    color: #113250;
    font-weight: bold;
    font-size: 2rem;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: inherit;
    /*  border:solid thin red;*/
}


/* Position the "next button" to the right */
.next {
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
        /* background-color: rgba(49,76,101,1);*/
    }

/* Caption text */

.numbertext {
    color: #113250;
    text-align: center;
}

/* The dots/bullets/indicators */


.dot {
    grid-column: 1/13;
    grid-row: 1/2;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}




    .active, .dot:hover {
        background-color: #314c65;
    }

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: .4s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}



@media screen and (max-width: 1200px) {
    .Courses {
        margin-bottom: 1em;
    }
}


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

    .thispage-heading h1 {
        grid-column: 1/13;
        margin-left: .2rem;
        margin-right: .2rem;
        margin-bottom: 1.0rem;
    }

   /* .top-container {
        border:solid medium red;
    }*/


    .Courses {
        margin: 0;
        width: 100%;
    }

    .div_options {
        width: 48%;
    }

        .div_options > p {
            padding: .5rem;
        }

        .div_options > h2 {
            margin: .5rem;
        }

    .Consent-text {
        left: 5%;
        right: 5%;
    }

    .Cookietext {
        background-color: #113250;
        color: white;
    }

    .faq_drop_menu {
        grid-column: 1/13;
    }

    .database-info {
        margin: 0;
        padding: 0;
        width: 100%;
    }


    .img-exit {
        height: 1.8rem;
    }
}


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


    .siteInfo {
        column-gap: .3rem;
    }

        .siteInfo a {
            font-size: 90%;
            padding: 0 .2rem 0 .2rem;
            min-height: 5rem;
        }

    .Grid-Item {
        width: 98%;
    }

        .Grid-Item > p {
            font-size: 95%;
        }

        .Grid-Item > H3 {
            margin: 1rem 0 .3rem 0;
            padding: 1em 0 0 0;
        }


    .Ul-list ul li p {
        padding-left: 3rem;
        max-width: 60ch;
    }

    .slideshow-caption-container p {
    }

    .div_options {
        width: 100%;
    }

        .div_options img {
        }

    .options2 {
        flex-direction: column;
    }

        .options2 > div {
            max-width: 95%;
            margin-left: auto;
            margin-right: auto;
        }

    .database-info {
        margin-top: 1.5rem;
        padding-top: 3rem;
    }

    #myBtn2 {
        height: 1.5rem;
    }

    .img-exit {
        height: 1.5rem;
    }

    .Button-top1, .Button-top2 {
        font-size: 90%;
    }
}


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

    .Button-top1, .Button-top2 {
        font-size: 85%;
    }

    .siteInfo {
        column-gap: .2rem;
    }

        .siteInfo a {
            font-size: 80%;
            padding: 0 .1rem 0 .1rem;
        }

    .Grid-Item {
        width: 98%;
    }

        .Grid-Item > p {
            font-size: 100%;
            margin: 1rem .5rem .2rem 1rem;
        }


    .top_info {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
    }

    .Ul-list ul li p {
        padding-left: .2rem;
        max-width: 60ch;
    }

    .slide-container {
        margin-top: .5rem;
    }

    .Consent-text {
        left: 5%;
        right: 5%;
    }

    .options > div {
        width: 98%;
    }

        .options > div > img {
            width: auto;
            height: 2rem;
        }

    .database-info {
        margin: .5rem 0 .5rem 0;
        padding: .5rem;
    }

    .images-various {
        height: 3rem;
        width: auto;
    }


    #myBtn2 {
        height: 1.0rem;
    }
}