/**********************************************************
    Page styling
 *********************************************************/
nav ul label.sub-menu-arrow {
    top: calc(18.7em + 2.55em);
}

main section.hero div.hero-img.organisation {
    background: url('../img/success.png'); /* [interchangeable image] */
    background-size: cover;
    background-position: top;
}

main section.hero div.hero-card.organisation img {
    width: 2.5em;
    animation: bounceBall 5s 2.5s ease-in-out forwards; 
}

main section.business-organisation {
    box-sizing: border-box;
    padding: 0 10px;
}

main section.business-organisation ol {
    list-style: none;
}

/* Topic content box  */
.rectangle {
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    text-align: center; 
}

/* level one box style */
.level-one {
    width: 90%;
    margin: 1rem auto 1.2em;
    padding: 20px;
    background: rgb(244, 246, 246);
}

/* vertical small connection line between main topic box and horizintal connection line */
.level-one::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: black;
    display: none;
}

/* ordered list: 'ol' element */
.level-two-wrapper {
    position: relative;
    padding-left: 0;
    left: calc((100%/4)/2);
    margin-right: calc((100%/4)/2);
}

/* vertical connection line between the second level boxes */
.level-two-wrapper::before {
    content: "";
    position: absolute;
    top: -1.75em;
    width: 2px;
    height: calc(100% + 2em);
    background: black;
}

.level-two-wrapper > li {
    position: relative;
}

/* vertical small connection lines between level two boxes and horizontal conncetion line */
.level-two-wrapper > li::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: black;
    display: none;
}

.level-two {
    width: 85%;
    /* between box title and text */
    margin: 0 auto 10px 1.3em; 
    padding: 20px 5px 20px 5px;
    background: rgb(248, 249, 249);
    font-size: 1rem;
    overflow-wrap: break-word;
}

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

.text-list {
    position: relative;
    padding-left: 0;
    margin-left: 1.4em;
    list-style-type: none;
    margin-bottom: 40px;
    width: 84%;
}

/* content box */
.text-list li {
    padding: 0.5em 0.2em;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    overflow-wrap: break-word;
}

.text-list li:nth-child(even) {
    margin-top: 0.8em;
    margin-bottom: 0.8em
}

/*-----------------------------------------------------------------------------------------------------------------------------*/

/**********************************************************
    Screen format depending styling
 *********************************************************/
 @media only screen and (min-width: 920px) {
    
    main section.business-organisation {
        margin: 0 5em 0 0;
    }
    /* Main topic box */
    .level-one {
        width: 50%;
        margin-bottom: 1.6em;
    }
    /* Small vertical line between main topic box and horizontal line */
    .level-one::before {
        display: block;
    }
    .level-two-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        left: 0;
        margin-right: 0;
    }
    /* horizontal connection line between the second level boxes */
    .level-two-wrapper::before {
        width: calc((100%/4)*3);
        height: 2px;
        left: calc((100%/4)/2);
        top: -20px;
    }
    /* vertical small connection lines between level two boxes and horizontal conncetion line */
    .level-two-wrapper > li::before {
        display: block;
    }
    .level-two {
        width: 90%;
        margin: 0 auto 10px;
    }
    /* horizontal small connection lines between level two boxes and vertical conncetion line */
    .level-two::after {
        display: none;
    }

    .text-list {
        margin-left: 6%;
        width: 88%;
    }
 }

 /*-----------------------------------------------------------------------------------------------------------------------------*/

/**********************************************************
    css based animation code
 *********************************************************/
 @keyframes bounceBall {
    0% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(1.2em);
    }
    25% {
        transform: translateY(-1em);
    }
    40% {
        transform: translateY(1.2em);
    }
    55% {
        transform: translateY(-0.5em);
    }
    65% {
        transform: translateY(1.2em);
    }
    75% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(1.2em);
    }
    85% {
        transform: translateY(0.5em);
    }
    90% {
        transform: translateY(1.2em);
    }
    95% {
        transform: translateY(0.8em);
    }
    97% {
        transform: translateY(1.2em);
    }
    99% {
        transform: translateY(1em);
    }
    100% {
        transform: translateY(1.2em);
    }
}