:root {
            --first-screen-bg: #11295a;
        }

        body {
            margin: 0;
            padding: 0;
            font-size: 1rem;
            font-family: "Google Sans", sans-serif;
            font-optical-sizing: auto;
            line-height: 1.45em;
        }

        a {
            text-decoration: none;
            color: #11295a;
        }

        .head {
            padding: 10px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            box-sizing: border-box;
        }

        .language-switcher {
            position: absolute;
            top: 15px;
            right: 20px;
            font-family: "Google Sans", sans-serif;
            font-size: 0.875rem;
            font-weight: bold;
        }

        .language-switcher a {
            color: white;
            text-decoration: none;
            opacity: .7;
        }

        .language-switcher a:hover,
        .language-switcher a.active {
            opacity: 1;
        }

        .language-switcher span {
            color: rgba(255, 255, 255, .5);
            margin: 0 5px;
        }



        .foot {
            background: linear-gradient(225deg,
                    transparent 0 25px,
                    rgb(228, 231, 240) 25px) right top, 50px 50px;
            padding: 10px;
            box-sizing: border-box;
        }

        .pageWidthLimit {
            margin: 0 auto;
            width: 100%;
            max-width: 900px;
            box-sizing: border-box;
        }

        .firstScreen {
            box-sizing: border-box;
            padding: 50px 0;
            min-height: 80vh;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            position: relative;
            background: var(--first-screen-bg);
        }

        .title {
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            color: rgb(102, 116, 166);

            text-align: left;
            padding: 25px 70px 35px 70px;
            margin: 0;
            background-image:
                linear-gradient(135deg, transparent 0 25px, white 25px),
                linear-gradient(315deg, transparent 0 25px, white 25px);

            background-position: 0 0, 100% 100%;
            background-size: 50% 100%;
            background-repeat: no-repeat;
            width: 600px;
            box-sizing: border-box;
        }

        .title h1 {
            font-size: 2rem;
            line-height: 1.25em;
            margin: 0 0 .5rem;
        }

        .title p {
            margin: 0;
        }

        .intro {
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            font-weight: normal;
            font-size: 1.5rem;
            line-height: 1.5em;
            color: rgb(213, 217, 231);
            padding: 20px 120px 30px 34px;
            margin: 0 auto;
            background-color: #000;
            background-image:
                linear-gradient(45deg, var(--first-screen-bg) 0 25px, transparent 25px),
                linear-gradient(225deg, var(--first-screen-bg) 0 25px, transparent 25px),
                url(../back-2.jpg);

            background-position: 0 0, 100% 100%, 100% 100%;
            background-size: 50% 100%, 50% 100%, contain;
            background-repeat: no-repeat;
            width: 600px;
            box-sizing: border-box;

        }

        .intro ul {
            list-style: none;
            padding-left: 0;
        }

        .intro li {
            position: relative;
            padding-left: 1.6em;
        }

        .intro li::before {
            content: "✓";
            position: absolute;
            left: 0;
            font-weight: bold;
            color: rgb(122, 254, 181);
        }







        h2.aboutTitle {
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            font-weight: bold;
            color: white;
            line-height: 1.25em;
            padding: 20px 70px 30px 70px;
            margin: 0;
            background-image:
                linear-gradient(45deg, white 0 25px, transparent 25px),
                linear-gradient(225deg, white 0 25px, rgb(78, 89, 128) 25px);

        }

        div.about {
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            font-weight: normal;
            font-size: 1.25em;
            line-height: 1.4em;
            padding: 40px 70px 50px 70px;
            margin: 0 0 2rem 0;

            background-image:
                linear-gradient(135deg, transparent 0 25px, white 25px),
                linear-gradient(315deg, transparent 0 25px, white 25px);

            background-position: 0 0, 100% 100%;
            background-size: 50% 100%;
            background-repeat: no-repeat;



        }

        h4.picturesTitle {
            text-align: center;
            margin-bottom: 1rem;
            display: block;
            color: rgb(78, 89, 128);
        }


        .arrowDown {
            width: 51px;
            height: 25px;
            margin: 0 auto;
            background: conic-gradient(at center bottom,
                    #11295a 45deg,
                    transparent 45deg 315deg,
                    #11295a 315deg);
        }

        .illustration {
            background:
                linear-gradient(225deg, var(--first-screen-bg) 0 25px, transparent 25px),
                url(../back.jpg);

            background-size: auto, cover;
            min-height: 300px;
            display: flex;
            align-items: end;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
        }

        .illustration.bottom {
            background:
                linear-gradient(315deg, white 0 25px, transparent 25px),
                url(../back.jpg);
            background-size: auto, cover;
            align-items: start;
        }

        /* Reset the counter for every nested list */
        ol {
            counter-reset: item;
            list-style-type: none;
            /* Removes default numbers */
            padding-left: 0;
        }

        /* Increment the counter on every list item */
        ol>li {
            display: block;
            counter-increment: item;
            margin-bottom: 1.5rem;
            padding-left: 20px;
            position: relative;
        }

        ol>li li {
            margin-bottom: 1rem;
        }

        ol ol {
            padding-top: 1rem;
            padding-left: 20px;
            /* Adds spacing for indentation */
        }

        /* Automatically generate and format the hierarchical numbers */
        ol>li::before {
            content: counters(item, ".") " ";
            /* Combines parent and child counters */
            font-weight: bold;
            /* Adds space between number and text */
            position: absolute;
            left: 0;
        }
        ol ol>li::before {
            left: -10px;
        }
        h4 {
            display: inline;
        }

        table {
            border-collapse: collapse;
            font-size: 0.875rem;
            line-height: 1.45em;
            margin-bottom: 1rem;
        }

        .table-responsive tbody tr:nth-child(even) {
            background-color: #f5f5f5;
        }

        .table-responsive tbody tr:nth-child(odd) {
            background-color: #fff;
        }

        table td {
            padding: 5px;
            border: 1px solid #ccc;

        }

        .table-responsive {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .table-responsive table {
            width: 100%;
            min-width: 900px;
            border-collapse: collapse;
        }

        .table-responsive th,
        .table-responsive td {
            padding: 8px 10px;
            border: 1px solid #ddd;
            vertical-align: top;
        }



        .table-responsive th {
            white-space: nowrap;
        }

        td.center {
            text-align: center;
        }

        td.right {
            text-align: right;
        }

        td.bold {
            font-weight: bold;
        }

        .tableTitle {
            font-weight: bold;
            font-size: 0.875rem;
            line-height: 1.45em;
        }

        .tableNumber {
            font-size: 0.75rem;
            font-style: italic;
            margin-bottom: 1rem;
            text-align: right;
        }

        .address {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 20px;
            align-items: center;
            margin: 10px 20px 20px 20px;

        }

        .address .text {
            flex: 1 1 auto;
            border-left: 1px solid rgba(0, 0, 0, .2);
            padding: 10px 10px 10px 20px;
        }

        .address .logo {
            flex: 0 0 151px;
        }

        .copyright {
            font-size: 0.75rem;
            line-height: 1.45em;
            text-align: center;
        }
 .pictures {
            display: flex;
            flex-direction: row;
            gap: 5px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .pictures .picture {
            flex: 0 1 250px;
            min-width: 150px;
        }

        .pictures .picture img {
            display: block;
            max-width: 100%;

        }

        .pictures .caption {
            font-family: "Google+Sans", sans-serif;
            font-size: 0.875rem;
            line-height: 1.25em;
            padding: 5px 0;
        }
        @media (max-width: 768px) {

            .head {
                text-align: left;
                padding-left: 20px;
            }

            .language-switcher {
                top: 21px;
            }
        .illustration {
           padding: 0 20px;
        }
            .title {
                padding: 25px 30px 35px 30px;
                width: 100%;
                max-width: 600px;
            }

            .title h1 {
                font-size: 1.5rem;
                line-height: 1.25em;
            }

            .intro {
                font-size: 1.25rem;
                line-height: 1.5em;
                padding: 25px 50px 35px 30px;
                width: 100%;
                max-width: 600px;

            }

            h2.aboutTitle {
                font-size: 1.5rem;
                line-height: 1.25em;
                text-align: left;
                padding: 25px 30px 35px 30px;
            }

            div.about {
                font-size: 1.25rem;
                line-height: 1.25em;
                padding: 25px 50px 35px 30px;

            }


            .pageWidthLimit {
                padding: 0 20px;
            }

            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .table-responsive table {
                min-width: 900px;
            }


            .address {
                flex-direction: column;



                flex-wrap: nowrap;
                gap: 20px;
                align-items: center;
                margin: 10px 20px 20px 20px;
            }

            .address .text {
                border-left: none;
                padding: 10px;
                text-align: center;
            }

            .address .logo {
                flex: 0 0 39px;
            }


        }