/*** Banner Section */
.banner {
    background: #fff center no-repeat;
    background-size: cover;
    box-shadow: inset 0 80px 80px -30px #ffffff,
    inset 0px -80px 80px -60px #64615f;
}

.banner .logo {
    width: 18rem;
}


/* Bar in Banner */
.bar-container {
    position: absolute;
    width: 10%;
    height: 100%;
    top: 0;
    display: flex;
}


.bar-container .bar-box {
    display: flex;
    height: 100%;
}


.bar-container .bar-box div {
    width: 6px;
    margin: 0 5px;
}

.bar-container .bar-box div:nth-child(1) {
    height: 65%;
    background-color: #0a50a1;
}

.bar-container .bar-box div:nth-child(2) {
    height: 75%;
    background-color: #ffff00;
}

.bar-container .bar-box div:nth-child(3) {
    height: 45%;
    background-color: #000000;
}

.bar-container:last-of-type .bar-box div:nth-child(1) {
    order: 3;
}

.bar-container:last-of-type .bar-box div:nth-child(2) {
    order: 2;
}

.bar-container:last-of-type .bar-box div:nth-child(3) {
    order: 1;
}

/**  . Context */
.context {
    background-image: url(./img/Hasemi-Class-Boys.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    background-blend-mode: normal;
    display: flex;
    justify-content: center;
}

.context .context-container {
    width: 50rem;
}

.context .context-container .context-block,
.contest .context-block {
    border-radius: 0.5rem;
    height: 8rem;
    width: 12rem;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover, cover;
    background-blend-mode: normal;
    display: flex;
    justify-content: center;
}

/**   Contest Section */
.contest {
    background-image: linear-gradient(
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.9)
    ),
    url(../media/bg-news-page.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover, cover;
    background-blend-mode: normal;
}


/** Component **/

.title-box {
    width: 100% !important;
    margin-top: -1.8rem;
}

.title-box .title {
    width: 66.5%;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    color: #fff;
    font-size: 1.5rem;
}

.title-box .title div {
    width: 50%;
}

.title-box .title div:last-child {
    align-self: center;
    height: 0.25rem !important;
}