/* RESET STYLES & HELPER CLASSES
末末末末末末末末末末末末末末末末末末末末末末末末末 */
:root {
    --level-1: #00338f;
    --level-2: #3da8ff;
    --level-3: #3da8ff;
    --black: black;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ol {
    list-style: none;
}

body {
    text-align: center;
    font-family: "Lato", sans-serif;
    font-size:12px;
}

.container {
    max-width: 80%;
    padding: 0 10px;
    margin: 0 auto;
}

.rectangle {
    position: relative;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-radius: 50px;
}


/* LEVEL-1 STYLES
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.level-1 {
    width: 30%;
    margin: 0 auto 20px;
    background: var(--level-1);
}

    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height:430%;
        background: var(--black);
    }

@media (max-width:1572px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 451%;
        background: var(--black);
    }
}

@media (max-width:1053px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 475%;
        background: var(--black);
    }
}

@media (max-width:1047px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 478%;
        background: var(--black);
    }
}

@media (max-width:1046px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 500%;
        background: var(--black);
    }
}

@media (max-width:912px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 530%;
        background: var(--black);
    }
}

@media (max-width:852px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 445%;
        background: var(--black);
    }
}

@media (max-width:840px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 465%;
        background: var(--black);
    }
}

@media (max-width:791px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 480%;
        background: var(--black);
    }
}

@media (max-width:768px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 500%;
        background: var(--black);
    }
}

@media (max-width:692px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 525%;
        background: var(--black);
    }
}

@media (max-width:632px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 447%;
        background: var(--black);
    }
}

@media (max-width:620px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 460%;
        background: var(--black);
    }
}

@media (max-width:571px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 480%;
        background: var(--black);
    }
}

@media (max-width:502px) {
    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 495%;
        background: var(--black);
    }
}
/* LEVEL-2 STYLES
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.level-2-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

    .level-2-wrapper::before {
        content: "";
        position: absolute;
        top: 30px;
        left: 25%;
        width: 50%;
        height: 4px;
        background: var(--black);
    }

.tipo2::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 80px;
    background: var(--black);
}

.tipo3::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 80px;
    background: var(--black);
}

    .level-2-wrapper li {
        position: relative;
    }

.level-2 {
    width: 70%;
    margin: 0 auto 20px;
    height: 70%;
    background: var(--level-2);
}


    .level-2::after {
        display: none;
        content: "";
        position: absolute;
        top: 30%;
        left: 0%;
        transform: translate(-100%, -50%);
        width: 20px;
        height: 2px;
        background: var(--black);
    }


/* LEVEL-3 STYLES
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.level-3-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

    .level-3-wrapper::before {
        content: "";
        position: absolute;
        top: 30px;
        left: 25%;
        width: 50%;
        height: 0px;
        background: var(--black);
    }

.level-3-wrapper li {
    position: relative;
}

.level-3 {
    width: 100%;
    height: 100%;
    background: var(--level-2);
    text-align:left;
}

.tipoe {
    margin:0 10px 0 0;
}

.tipod {
    margin:0 0 0 10px;
}

    .level-3::after {
        display: none;
        content: "";
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translate(-100%, -50%);
        width: 20px;
        height: 2px;
        background: var(--black);
    }