.content-page {
    margin: 0 -8px;
}
    .content-page .title {
        width: 100%;
        display: grid;
    }
        .content-page .title .title-block {
            justify-content: middle;
            text-align: center;
        }
            .content-page .title .title-block .logo {
                aspect-ratio: 1/1;
                border-radius: 100%;
                vertical-align: middle;
            }
            .content-page .title .title-block .label {
                vertical-align: middle;
                text-align: left;
            }
                .content-page .title .title-block .label .first {
                    font-weight: 500;
                    color: white;
                }
                .content-page .title .title-block .label .sub {
                    font-weight: 400;
                    color: rgba(255, 255, 255, 0.9);
                }

    @media all and (min-width: 1700px) {
        .content-page .title {
            height: 60vh;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
        }
            .content-page .title .title-block {
                grid-column: 2/5;
                grid-row: 2/5;
            }
                .content-page .title .title-block .logo {
                    display: inline-block;
                    height: 200px;
                    margin-right: 20px;
                }
                .content-page .title .title-block .label {
                    display: inline-block;
                }
                    .content-page .title .title-block .label .first {
                        font-size: 80px;
                    }
                    .content-page .title .title-block .label .sub {
                        font-size: 32px;
                    }
    }
    @media all and (max-width: 1700px) and (min-width: 770px) {
        .content-page .title {
            height: 60vh;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
        }
            .content-page .title .title-block {
                grid-column: 1/6;
                grid-row: 2/5;
            }
                .content-page .title .title-block .logo {
                    display: inline-block;
                    height: 200px;
                    margin-right: 20px;
                }
                .content-page .title .title-block .label {
                    display: inline-block;
                }
                    .content-page .title .title-block .label .first {
                        font-size: 55px;
                    }
                    .content-page .title .title-block .label .sub {
                        font-size: 25px;
                    }
    }
    @media all and (max-width: 770px) and (min-width: 480px) {
        .content-page .title {
            height: 50vh;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(1, 1fr);
        }
            .content-page .title .title-block {
                grid-column: 1;
                grid-row: 1;
                text-align: center;
            }
                .content-page .title .title-block .logo {
                    display: block;
                    height: 200px;
                    margin: 0 auto 20px auto;
                }
                .content-page .title .title-block .label {
                    display: block;
                    text-align: center;
                }
                    .content-page .title .title-block .label .first {
                        font-size: 40px;
                    }
                    .content-page .title .title-block .label .sub {
                        font-size: 15px;
                    }
    }
    @media all and (max-width: 480px) {
        .content-page .title {
            height: 50vh;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(1, 1fr);
        }
            .content-page .title .title-block {
                grid-column: 1;
                grid-row: 1;
                text-align: center;
            }
                .content-page .title .title-block .logo {
                    display: block;
                    height: 200px;
                    margin: 0 auto 20px auto;
                }
                .content-page .title .title-block .label {
                    display: block;
                    text-align: center;
                }
                    .content-page .title .title-block .label .first {
                        font-size: 35px;
                    }
                    .content-page .title .title-block .label .sub {
                        font-size: 13px;
                    }
    }

    .content-page .nav { padding: 30px 20px; }
        .nav {
            overflow: auto;
            text-align: center;
            white-space: nowrap;
        }
            .nav .nav-btn {
                background-color: var(--color-1);
                color: var(--opp-color-1);
                border: none;
                border-radius: 30px;
                transition: .3s;
            }
                .nav .nav-btn:hover {
                    background-color: var(--theme);
                    border-radius: 40px;
                }
                .nav .nav-btn.active {
                    background-color: var(--theme);
                    border-radius: 40px;
                }
                .nav .nav-btn .nav-icon { font-weight: 100; }
                .nav .nav-btn .nav-label {
                    font-weight: 100;
                    letter-spacing: 2px;
                }

    @media all and (min-width: 770px) {
        .nav .nav-btn {
            padding: 20px 60px;
            margin: 0 20px;
        }
            .nav .nav-btn .nav-icon {
                font-size: 30px;
            }
            .nav .nav-btn .nav-label {
                font-size: 13px;
                margin-top: 10px;
            }
    }
    @media all and (max-width: 770px) and (min-width: 480px) {
        .nav .nav-btn {
            padding: 17px 50px;
            margin: 0 10px;
        }
            .nav .nav-btn .nav-icon {
                font-size: 30px;
            }
            .nav .nav-btn .nav-label {
                font-size: 13px;
                margin-top: 10px;
            }
    }
    @media all and (max-width: 480px) {
        .nav .nav-btn {
            padding: 17px 40px;
            margin: 0 5px;
        }
            .nav .nav-btn .nav-icon {
                font-size: 25px;
            }
            .nav .nav-btn .nav-label {
                font-size: 13px;
                margin-top: 10px;
            }
    }

    .content-page .popup .popup-text {
        font-size: 13px;
        font-weight: 100;
    }
    .content-page .popup .popup-title {
        display: inline-block;
    }
        .content-page .popup .popup-title .title-icon {
            display: inline-block;
            vertical-align: middle;
            font-size: 35px;
            font-weight: 230;
            margin-right: 10px;
        }
        .content-page .popup .popup-title .title-label {
            display: inline-block;
            vertical-align: middle;
            font-weight: 500;
            font-size: 30px;
        }
        .content-page .popup .popup-section .popup-section-title {
            font-size: 23px;
            font-weight: 300;
            margin-bottom: 10px;
        }
        .content-page .popup .popup-section .popup-section-element {
            padding: 10px;
        }

    @media all and (min-width: 1700px) {
        .content-page .popup { padding: 50px 40px; }
        .content-page .popup .popup-text { margin-right: 10px; }
        .content-page .popup .popup-title { padding: 10px 0 30px 30px; }
    }
    @media all and (max-width: 1700px) and (min-width: 770px) {
        .content-page .popup { padding: 50px 20px; }  
        .content-page .popup .popup-text { margin-right: 10px; }
        .content-page .popup .popup-title { padding: 10px 0 30px 30px; } 
    }
    @media all and (max-width: 770px) and (min-width: 480px) {
        .content-page .popup { padding: 40px 10px; }
        .content-page .popup .popup-text { margin-right: 5px; }
        .content-page .popup .popup-title { padding: 10px 0 20px 20px; }
    }
    @media all and (max-width: 480px) {
        .content-page .popup { padding: 40px 10px; }
        .content-page .popup .popup-text { margin-right: 5px; }
        .content-page .popup .popup-title { padding: 10px 0 20px 20px; }
    }

.list-element, .details-element {
    margin: 5px 0;
    padding: 10px 20px;
    background-color: var(--color-2);
    border-radius: 10px;
    height: min-content;
    transition: .3s;
}
    .list-element:hover, .details-element:hover {
        cursor: pointer;
        background-color: var(--color-3);
        border-radius: 20px;
        transition: .3s;
    }

    .list-element .list-icon {
        display: inline-block;
        vertical-align: middle;
        font-size: 24px;
        font-weight: 200;
        margin-right: 5px;
    }
    .list-element .list-label {
        display: inline-block;
        vertical-align: bottom;
        font-size: 18px;
        font-weight: 400;
    }
    .list-element .list-href {
        margin: -1.5px -10px 0 0;
        float: right;
        font-size: 25px;
        font-weight: 200;
    }

.details-element .details-logo {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    margin: 0 5px 0 10px;
}
.details-element .details-icon {
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    font-weight: 200;
    margin: 0 5px 0 10px;
}
.details-element .details-label {
    display: inline-block;
    vertical-align: middle;
    font-size: 23px;
    font-weight: 300;
}
.details-element .details-sublabel {
    margin: 10px;
    font-size: 15px;
    font-weight: 400;
}
.details-element .details-place {
    margin: 5px 10px;
    font-size: 12px;
    font-weight: 400;
}
.details-element .details-href {
    background-color: var(--green);
    color: white;
    padding: 10px;
    border-radius: 10px;
    float: right;
    font-size: 15px;
    font-weight: 200;
    transition: .3s;
}
    .details-element .details-href:hover {
        filter: brightness(120%);
        border-radius: 15px;
    }
.details-element .details-progress {
    background-color: var(--color-1);
    height: 12px;
    border-radius: 10px;
    padding: 3px;
}
    .details-element .details-progress .details-progress-div {
        background-color: var(--theme);
        color: black;
        text-align: right;
        font-size: 10px;
        height: 12px;
        border-radius: 6px;
        padding: 0 3px;
        transition: .3s;
    }
.details-element .details-start {
    margin: 10px;
    font-size: 10px;
    font-weight: 330;
}
.details-element .details-label.size-2 { font-size: 15px; }
.details-element .details-description {
    padding: 20px 10px 10px 10px;
    line-height: 24px;
    font-size: 17px;
    font-weight: 250;
}

.grid-two, .grid-three, .grid-four {
    display: grid;
    gap: 10px;
}

@media all and (min-width: 1700px) {
    .grid-two { grid-template-columns: repeat(2, 1fr); }
    .grid-three { grid-template-columns: repeat(3, 1fr); }
    .grid-four { grid-template-columns: repeat(4, 1fr); }
    
    .grid-span-two { grid-column: span 2; }
    .grid-span-three { grid-column: span 3; }
    .grid-span-four { grid-column: span 4; }
}
@media all and (max-width: 1700px) and (min-width: 770px) {
    .grid-two { grid-template-columns: repeat(2, 1fr); }
    .grid-three { grid-template-columns: repeat(3, 1fr); }
    .grid-four { grid-template-columns: repeat(4, 1fr); }
    
    .grid-span-two { grid-column: span 2; }
    .grid-span-three { grid-column: span 3; }
    .grid-span-four { grid-column: span 4; }
}
@media all and (max-width: 770px) and (min-width: 480px) {
    .grid-two { grid-template-columns: repeat(1, 1fr); }
    .grid-three { grid-template-columns: repeat(2, 1fr); }
    .grid-four { grid-template-columns: repeat(2, 1fr); }
    
    .grid-span-two { grid-column: span 1; }
    .grid-span-three { grid-column: span 2; }
    .grid-span-four { grid-column: span 2; }
}
@media all and (max-width: 480px) {
    .grid-two { grid-template-columns: repeat(1, 1fr); }
    .grid-three { grid-template-columns: repeat(1, 1fr); }
    .grid-four { grid-template-columns: repeat(1, 1fr); }
    
    .grid-span-two { grid-column: span 1; }
    .grid-span-three { grid-column: span 1; }
    .grid-span-four { grid-column: span 1; }
}