@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');
@media (min-width: 744px) {
    html {
        position: relative;
        min-height: 100%;
        max-width: 100vw;
        color: #cdcdcd;
        background-color: black;
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        /*overflow:hidden;*/
        overflow-y: scroll;
        overflow-x: hidden;
    }

    @media (min-width: 768px) {
        html {
            background-color: black;
        }
    }

    body {
        background-color: black;
        font-family: 'Raleway' !important;
    }


    /*scroll bar*/
    ::-webkit-scrollbar {
        width: 10px;
        background-color: #f5f5f5;
    }

    ::-webkit-scrollbar-track {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        border: 1px solid #ccc;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #a19f9f;
        border: 1px solid #575656;
    }

        ::-webkit-scrollbar-thumb:hover {
            background: black;
            cursor: pointer !important;
        }

        ::-webkit-scrollbar-thumb:active {
            background: linear-gradient(left, #22add4, #1e98ba);
        }



    .Locator511 {
        position: relative;
        left: 66.8vw;
        top: 10vw;
    }

    .Locator522 {
        position: relative;
        left: 3.8vw;
        top: -4vw;
    }

    .Locator533 {
        position: relative;
        left: 68.2vw;
        top: 3vw;
    }

    /*start of menu CSS*/
    #menuToggle {
        display: block;
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }

        #menuToggle a {
            text-decoration: none;
            color: #232323;
            transition: color 0.3s ease;
        }

            #menuToggle a:hover {
                color: tomato;
            }


        #menuToggle input {
            display: block;
            width: 40px;
            height: 32px;
            position: absolute;
            top: -7px;
            left: -5px;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
            -webkit-touch-callout: none;
        }

        #menuToggle span {
            display: block;
            width: 33px;
            height: 4px;
            margin-bottom: 5px;
            position: relative;
            background: #cdcdcd;
            border-radius: 3px;
            z-index: 1;
            transform-origin: 4px 0px;
            transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

            #menuToggle span:first-child {
                transform-origin: 0% 0%;
            }

            #menuToggle span:nth-last-child(2) {
                transform-origin: 0% 100%;
            }
    /*//checked//*/
    /*    #menuToggle input:checked ~ span  {
        transform: rotate(45deg) translate(0px, 0px);
    }

        #menuToggle input:checked ~ span:nth-last-child(2) {
            visibility: hidden;
            opacity: 0;
            transition: all 0ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        #menuToggle input:checked ~ span:nth-last-child(3) {
            transform: rotate(-45deg) translate(-8px, 3px);
        }*/


    /*//end//*/
    #menu {
        position: absolute;
        left: -17px;
        width: 100vw;
        height: 60px;
        margin: -170px 0 0 0px;
        padding: 50px;
        padding-top: 125px;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(1px);
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        transform: translate(0, -100%);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

        #menu li {
            padding: 0px 0;
            display: inline-block;
            height: 50px;
        }

            #menu li span {
                background: -webkit-linear-gradient(white, whitesmoke);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 600;
                font-size: 15px;
                height: 25px;
                width: 110px;
                text-align: left;
                margin-bottom: 0;
                margin-top: 17px;
                cursor: pointer;
            }

                #menu li span:hover {
                    text-shadow: 0px 0px 1px #fff, 0px 0px 1px #0aa3be;
                }

    /*#menuToggle input:checked ~ ul {
    transform: none;
}*/
    #menuToggle input:hover ~ ul {
        transform: none;
    }

    #menu:hover {
        transform: none;
    }

    #menuToggle input:not(:hover) ~ ul {
        /*transform: none;*/
        transition-delay: 2s;
    }

    /*end of menu CSS*/






    /*Pages CSS*/

    .Page1 {
        background-image: url(/Images/page1.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 65vw;
    }

    .logo {
        background-image: url('/Images/Color logo - no background (50pc).png');
        background-size: 100%;
        background-repeat: no-repeat;
        width: 20vw;
        height: 10vw;
        position: relative;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block; /* Block-level elements can be centered with margins. */
        top: 3.5vw;
    }


    .logo2 {
        background-image: url('/Images/Color logo - no background (50pc).png');
        background-size: 100%;
        background-repeat: no-repeat;
        /* min-height: 5vw; */
        width: 26vw;
        height: 10vw;
        position: relative;
        left: 71.7vw;
        top: 16vw;
    }


    .Page2 {
        background-image: url(/Images/page2new.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 65vw;
    }

        .Page2 .text {
            position: relative;
            width: 28vw;
            left: 4vw;
            top: 7vw;
            font-size: 1.3vw;
            color: white;
            text-align: left;
        }

        .Page2 .text2 {
            position: relative;
            width: 25vw;
            left: 21vw;
            top: 16vw;
            font-size: 1.3vw;
            color: white;
            text-align: right;
        }


    .Page3 {
        background-image: url(/Images/page3new.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 96vw;

    }

        .Page3 .text {
            position: relative;
            width: 22vw;
            left: 61vw;
            top: 12vw;
            font-size: 1.3vw;
            color: white;
            text-align: right;
            font-weight: 500;
            letter-spacing: 1px;
        }

        .Page3 .text2 {
            position: relative;
            width: 26vw;
            left: 30vw;
            top: 35vw;
            font-size: 1.3vw;
            color: white;
            text-align: left;
            letter-spacing: 0.5px;
        }


    .Page4 {
        background-image: url(/Images/page3new.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 65vw;
    }

    .Page5 {
        background-image: url(/Images/page4new.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 65vw;
    }

    .Page5-1 {
        background-image: url(/Images/page5new.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 60vw;
    }

    .Page5-2 {
        background-image: url(/Images/page6new.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 60vw;
    }

    .Page5-3 {
        background-image: url(/Images/page7new.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 70vw;
    }

    .Page6 {
        background-image: url(/Images/page6.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 47vw;
    }

  /*  .Page7 {
        background-image: url(/Images/page7.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 67vw;
    }*/

   /* .Page8 {
        background-image: url(/Images/page8.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 49vw;
    }

        .Page8 .text {
            position: relative;
            width: 26vw;
            left: 73.5vw;
            top: 18vw;
            font-size: 1.8vw;
            color: white;
            text-align: left;
            font-weight: 400;
        }

*/

    .Page4 .text {
        position: relative;
        width: 30vw;
        left: 64.5vw;
        top: 4vw;
        font-size: 1.3vw;
        color: white;
        text-align: right;
    }

   /* .Page5 .text {
        position: relative;
        width: 35vw;
        left: 5vw;
        top: 5vw;
        font-size: 1.3vw;
        color: white;
        text-align: left;
    }*/
    .Page5 .text {
        position: relative;
        width: 30vw; /* responsive max width */
        margin-left: 5vw; /* instead of left: 5vw */
        top: 4vw;
        color: white;
        text-align: left;
        font-size: 1.3vw;
    }

    .Page5-1 .text {
        position: relative;
        width: 30vw;
        left: 65vw;
        top: 4.5vw;
        font-size: 1.3vw;
        color: white;
        text-align: right;
       
    }

    .Page5-2 .text {
        position: relative;
        width: 32vw;
        left: 4vw;
        top: 7.5vw;
        font-size: 1.3vw;
        color: white;
        text-align: left;
    }

    .Page5-3 .text {
        position: relative;
        width: 29vw;
        left: 66vw;
        top: 7.5vw;
        font-size: 1.3vw;
        color: white;
        text-align: right;
    }

    /*//title CSS//*/


    .type {
        font-size: 3.5vw;
        letter-spacing: 4px;
        font-weight: 800;
        color: white;
        position: absolute;
        left: 33vw;
        top: 15vw;
    }

    .type2 {
        font-size: 3.5vw;
        letter-spacing: 4px;
        font-weight: 800;
        color: white;
        position: absolute;
        left: 42vw;
        top: 20vw;
    }


    .type3 {
        font-size: 3.5vw;
        letter-spacing: 4px;
        font-weight: 800;
        color: white;
        position: absolute;
        left: 64.5vw;
        top: 20vw;
        /*text-shadow: -0.5px 0 white, 0 0.5px white, 0.5px 0 white, 0 -0.5px white, -0.5px -0.5px white, 0.5px 0.5px white, -0.5px 0.5px white, 0.5px -0.5px white;*/
    }

    .type4 {
        font-size: 1.5vw;
        letter-spacing: 1px;
        color: white;
        position: absolute;
        left: 33vw;
        top: 32.5vw;
    }


        .type > span, .type2 > span, .type3 > span, .type4 > span {
            border-right: .05em solid;
            animation: caret 1s steps(1) infinite;
        }

    @keyframes caret {
        50% {
            border-color: transparent;
        }
    }










    /*////////////////////////text animation////////////////////////////////*/


    h1 {
        color: #484848;
        font-size: 2.2vw;
        font-weight: 900;
        letter-spacing: 1px;
    }

        h1 span {
            transition: 2s linear
        }

    h2 {
        color: #484848;
        font-size: 2.2vw;
        font-weight: 900;
        letter-spacing: 1px;
    }

        h2 span {
            transition: 2s linear
        }

    h3 {
        color: #484848;
        font-size: 5vw;
        font-weight: 900;
        letter-spacing: 1px;
    }

        h3 span {
            transition: 2s linear
        }

    h4 {
        color: #484848;
        font-size: 5vw;
        font-weight: 900;
        letter-spacing: 1px;
    }

        h4 span {
            transition: 2s linear
        }

    h5 {
        color: #484848;
        font-size: 5vw;
        font-weight: 900;
        letter-spacing: 1px;
    }

        h5 span {
            transition: 2s linear
        }

    .spaneffect {
        color: #fff;
        text-shadow: 0 0 0.5px white, 0 0 0.5px white, 0 0 0.5px white;
    }

    .pos1 {
        position: relative;
        left: 19vw;
        top: 1vw;
        width: 40vw;
    }

    .pos3 {
        position: relative;
        left: 42vw;
        top: -6vw;
        width: 40vw;
    }

    .pos4 {
        position: relative;
        left: 46vw;
        top: -6vw;
        width: 40vw;
    }

    .pos5 {
        position: relative;
        left: 12vw;
        top: 3vw;
        width: 20vw;
    }

    .pos6 {
        position: relative;
        left: 20vw;
        top: -2vw;
        font-size: 4.5vw;
        font-weight: 900;
        opacity: 0;
        width: 20vw;
    }

    .pos6-1 {
        position: relative;
        left: 19.7vw;
        top: -2.9vw;
        font-size: 4.5vw;
        font-weight: 900;
        width: 25vw;
        height: 6vw;
    }

    .pos7 {
        position: relative;
        left: 27vw;
        top: -3vw;
        width: 30vw;
    }


    .pos8 {
        position: relative;
        left: 56.3vw;
        top: 10.5vw;
        width: 40vw;
    }

    .pos8-1 {
        position: relative;
        left: 58.5vw;
        top: 8.5vw;
        width: 40vw;
    }

    .pos8-12 {
        position: relative;
        left: 57.5vw;
        top: 6vw;
        width: 40vw;
    }

    .pos8-13 {
        position: relative;
        left: 59vw;
        top: 3.5vw;
        width: 26vw;
    }


    .postitle {
        position: relative;
        /* left: 56.3vw; */
        top: 3vw;
        width: 40vw;
        margin-left: auto;
        margin-right: auto;
    }

    .postitle-1 {
        position: relative;
        /* left: 56.3vw; */
        top: 2vw;
        width: 40vw;
        margin-left: auto;
        margin-right: auto;
    }

    #subTITLE {
        font-size: 1.6vw;
    }

    .pos9 {
        position: relative;
        left: -5.5vw;
        top: 7vw;
        width: 40vw;
    }

    .pos911 {
        position: relative;
        left: 0vw;
        top: 3.5vw;
        width: 40vw;
    }

    .pos9-1 {
        position: relative;
        left: 71vw;
        top: 9vw;
        width: 27vw;
    }

    .pos9-19 {
        position: relative;
        left: 71vw;
        top: 6.5vw;
        width: 27vw;
    }

    .pos9-191 {
        position: relative;
        left: 67vw;
        top: 4vw;
        width: 27vw;
    }

    .pos9-2 {
        position: relative;
        left: 66.6vw;
        top: 18vw;
        width: 25vw;
    }

    .pos9-3 {
        position: relative;
        left: 67.4vw;
        top: 16vw;
        width: 30vw;
    }

    .pos9-4 {
        position: relative;
        left: 66.6vw;
        top: 14vw;
        width: 30vw;
    }

    .pos9-5 {
        position: relative;
        left: -3.2vw;
        top: 9.5vw;
        width: 40vw;
    }

    .pos9-52 {
        position: relative;
        left: -0.3vw;
        top: 7vw;
        width: 40vw;
    }

    .pos9-6 {
        position: relative;
        left: 3.8vw;
        top: 5.4vw;
        width: 40vw;
    }

    .pos9-7 {
        position: relative;
        left: 2.9vw;
        top: 3.6vw;
        width: 40vw;
    }

    .pos9-8 {
        position: relative;
        left: 67vw;
        top: 9.5vw;
        width: 29vw;
    }

    .pos9-822 {
        position: relative;
        left: 55vw;
        top: 7vw;
        width: 42vw;
    }

    .pos9-9 {
        position: relative;
        left: 74vw;
        top: 18vw;
        width: 25vw;
    }

    .pos9-10 {
        position: relative;
        left: 60.5vw;
        top: 16vw;
        width: 35vw;
    }

    .pos9-new {
        position: relative;
        left: -6vw;
        top: 9vw;
        width: 40vw;
    }

    .pos10-new {
        position: relative;
        left: -6.3vw;
        top: 6.5vw;
        width: 40vw;
    }

    .pos10 {
        position: relative;
        left: -6.3vw;
        top: 7vw;
        width: 40vw;
    }

    .pos11 {
        position: relative;
        left: -1.5vw;
        top: 0vw;
        width: 25vw;
    }

    .pos12 {
        position: relative;
        left: 11.5vw;
        top: 2.5vw;
        font-size: 3vw;
        width: 40vw;
    }


    .pos13 {
        position: relative;
        left: 4vw;
        top: 1vw;
        font-size: 1.3vw;
        text-decoration: none;
        color: white;
        text-align: left;
    }


    .poslinkedin {
        background-image: url(/Images/LN.png);
        background-size: contain;
        position: relative;
        left: 90.8vw;
        top: 3vw;
        width: 25px;
        height: 25px;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;
        cursor: pointer;
    }

        .poslinkedin:hover {
            background-image: url(/Images/LN-white.png);
            width: 26px;
            height: 26px;
        }

    /*  FLICKER TEXT*/


    .sign {
        position: relative;
        width: 40vw;
        left: 27vw;
        top: -5vw;
        text-transform: uppercase;
        font-size: 4.5vw;
        font-weight: 900;
        color: #ffe6ff;
        /*text-shadow: 0 0 0.6rem #ff1a02, 0 0 1.5rem #fff68e, -0.2rem 0.1rem 1rem #fff68e, 0.2rem 0.1rem 1rem #fff68e, 0 -0.5rem 2rem #ff1a02, 0 0.5rem 3rem #ff1a02;*/
        text-shadow: 0 0 0.6rem #ff1a02, 0 0 1rem #fff68e, -0.2rem 0.1rem 1rem #fff68e, 0.2rem 0.1rem 1rem #fff68e, 0 -0.5rem 2rem #ff1a02, 0 0.5rem 3rem #ff1a02;
        animation: shine 2s forwards, flicker 3s infinite;
    }

    @keyframes blink {
        0%, 22%, 36%, 75% {
            color: white;
            text-shadow: 0 0 0.6rem #ff1a02, 0 0 1.5rem #fff68e, -0.2rem 0.1rem 1rem #fff68e, 0.2rem 0.1rem 1rem #fff68e, 0 -0.5rem 2rem #ff1a02, 0 0.5rem 3rem #ff1a02;
        }

        28%, 33% {
            color: #ffe6ff;
            text-shadow: none;
        }

        82%, 97% {
            color: #141414;
            /*color: #ff1a02;*/
            text-shadow: none;
        }
    }

    .flicker {
        animation: shine 4s forwards, blink 5s 4s infinite;
    }

    .fast-flicker {
        animation: shine 2s forwards, blink 10s 1s infinite;
    }

    @keyframes shine {
        0% {
            color: #ff1a02;
            text-shadow: none;
        }

        100% {
            color: #ffe6ff;
            text-shadow: 0 0 0.6rem #ff1a02, 0 0 1.5rem #fff68e, -0.2rem 0.1rem 1rem #fff68e, 0.2rem 0.1rem 1rem #fff68e, 0 -0.5rem 2rem #ff1a02, 0 0.5rem 3rem #ff1a02;
        }
    }

    @keyframes flicker {
        from {
            opacity: 1;
        }

        4% {
            opacity: 0.9;
        }

        6% {
            opacity: 0.85;
        }

        8% {
            opacity: 0.95;
        }

        10% {
            opacity: 0.9;
        }

        11% {
            opacity: 0.922;
        }

        12% {
            opacity: 0.9;
        }

        14% {
            opacity: 0.95;
        }

        16% {
            opacity: 0.98;
        }

        17% {
            opacity: 0.9;
        }

        19% {
            opacity: 0.93;
        }

        20% {
            opacity: 0.99;
        }

        24% {
            opacity: 1;
        }

        26% {
            opacity: 0.94;
        }

        28% {
            opacity: 0.98;
        }

        37% {
            opacity: 0.93;
        }

        38% {
            opacity: 0.5;
        }

        39% {
            opacity: 0.96;
        }

        42% {
            opacity: 1;
        }

        44% {
            opacity: 0.97;
        }

        46% {
            opacity: 0.94;
        }

        56% {
            opacity: 0.9;
        }

        58% {
            opacity: 0.9;
        }

        60% {
            opacity: 0.99;
        }

        68% {
            opacity: 1;
        }

        70% {
            opacity: 0.9;
        }

        72% {
            opacity: 0.95;
        }

        93% {
            opacity: 0.93;
        }

        95% {
            opacity: 0.95;
        }

        97% {
            opacity: 0.93;
        }

        to {
            opacity: 1;
        }
    }







    /*input FORM*/

    .containForm {
        width: 31.5vw;
        height: 22.5vw;
        position: relative;
        /*    left: 16.5vw;
    top: -3vw;*/
        left: 4vw;
        top: 4vw;
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(1px);
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        padding: 20px;
        color: white;
        font-size: 0.8em;
        border-radius: 3px;
    }


        .containForm input#name, #email {
            /*width: 300px;*/
            height: 25px;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(1px);
            list-style-type: none;
            -webkit-font-smoothing: antialiased;
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            border: none;
            font-size: 10pt;
            float: left;
            color: #262626;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-transition: all .55s ease;
            -moz-transition: all .55s ease;
            -ms-transition: all .55s ease;
            -o-transition: all .55s ease;
            transition: all .55s ease;
        }

            .containForm input#name:not(:focus), #email:not(:focus) {
                color: white;
            }


            .containForm input#name::-webkit-input-placeholder, #email::-webkit-input-placeholder {
                color: #65737e;
            }

            .containForm input#name:-moz-placeholder, #email:-moz-placeholder { /* Firefox 18- */
                color: #65737e;
            }

            .containForm input#name::-moz-placeholder, #email::-moz-placeholder { /* Firefox 19+ */
                color: #65737e;
            }

            .containForm input#name:-ms-input-placeholder, #email:-ms-input-placeholder {
                color: #65737e;
            }

            .containForm input#name:focus, #email:focus, .containForm input#name:active, #email:active {
                outline: none;
                background: #ffffff;
            }


    .inputfontsize {
        /*font-size: 1vw;*/
        font-size: 1em;
    }

    input[type="checkbox"]:checked {
        background-color: green;
    }


    .buttonStyle {
        width: 150px;
        /*background: rgba(0,0,0,0.2);*/
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(1px);
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        border: none;
        font-size: 10pt;
        float: left;
        color: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-transition: all .55s ease;
        -moz-transition: all .55s ease;
        -ms-transition: all .55s ease;
        -o-transition: all .55s ease;
        transition: all .55s ease;
        float: right;
    }


        .buttonStyle:hover {
            background: rgba(0,0,0,1);
            box-shadow: -1px 0 rgba(255,255,255,0.2), 0 1px rgba(255,255,255,0.2), 1px 0 rgba(255,255,255,0.2), 0 -1px rgba(255,255,255,0.2), -1px -1px rgba(255,255,255,0.2), 1px 1px rgba(255,255,255,0.2), -1px 1px rgba(255,255,255,0.2), 1px -1px rgba(255,255,255,0.2);
        }


    /*DOWN ARROWS*/


    .arrows {
        width: 60px;
        height: 72px;
        position: absolute;
        left: 50%;
        margin-left: -30px;
        bottom: 20px;
        cursor: pointer;
    }

    .arrowsHide {
        display: none;
        visibility: hidden;
    }

    .arrows path {
        stroke: WHITE;
        fill: transparent;
        stroke-width: 1px;
        animation: arrow 2s infinite;
        -webkit-animation: arrow 2s infinite;
    }

    @keyframes arrow {
        0% {
            opacity: 0;
        }

        40% {
            opacity: 1;
        }

        80% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @-webkit-keyframes arrow /*Safari and Chrome*/ {
        0% {
            opacity: 0;
        }

        40% {
            opacity: 1;
        }

        80% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    .arrows path.a1 {
        animation-delay: -1s;
        -webkit-animation-delay: -1s; /* Safari 和 Chrome */
    }

    .arrows path.a2 {
        animation-delay: -0.5s;
        -webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
    }

    .arrows path.a3 {
        animation-delay: 0s;
        -webkit-animation-delay: 0s; /* Safari 和 Chrome */
    }



    /*//FIXED TEXT//*/

    .svgText {
        letter-spacing: 10px;
        stroke: cyan;
        font-size: 5vw;
        font-weight: 100;
        stroke-width: 1;
        animation: textAnimate 7s infinite alternate;
    }

    @keyframes textAnimate {
        0% {
            stroke-dasharray: 0 50%;
            stroke-dashoffset: 20%;
            fill: white;
            /*fill: hsl(189, 68%, 75%);*/
        }

        100% {
            stroke-dasharray: 50% 0;
            stroke-dashoffstet: -20%;
            /*fill: hsla(189, 68%, 75%, 0%);*/
            fill: black;
        }
    }



    .svgposition {
        position: relative;
        display: block;
        width: 20vw;
        height: 5vw;
    }



    .svgTextOnce {
        /*letter-spacing: 2px;*/
        stroke: cyan;
        font-size: 3.8vw;
        font-weight: 100;
        stroke-width: 1;
        animation: textAnimate 7s forwards;
    }

    @keyframes textAnimate {
        0% {
            stroke-dasharray: 0 50%;
            stroke-dashoffset: 20%;
            fill: black;
        }

        100% {
            stroke-dasharray: 50% 0;
            stroke-dashoffstet: -20%;
            fill: white;
            stroke: white;
        }
    }



    .svgTextOnce2 {
        letter-spacing: 2px;
        stroke: cyan;
        /*font-size: 4vw;*/
        font-weight: 100;
        stroke-width: 1;
        animation: textAnimate 7s forwards;
    }

    @keyframes textAnimate {
        0% {
            stroke-dasharray: 0 50%;
            stroke-dashoffset: 20%;
            fill: black;
        }

        100% {
            stroke-dasharray: 50% 0;
            stroke-dashoffstet: -20%;
            fill: white;
            stroke: white;
        }
    }




    /*.checklist {
        list-style: none;
        padding-left: 9px;
    }

        .checklist li {
            padding: 10px 0;
            text-indent: -33px;  Adjust this as needed 
            padding-left: 20px;  Adjust this as needed 
        }*/
    .checklist {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .checklist li {
            display: grid;
            grid-template-columns: 1.5em 1fr; /* icon column + text column */
            align-items: start;
            column-gap: 0.6em;
            margin-bottom: 0.3em;
        }

        .checklist .icon {
            text-align: center;
            color: #00c48c;
        }
   
}