.spacer {
    aspect-ratio: 960/300;
    position: absolute;
    top: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}

.layer1 {
    background-image: url(../svg/ourworklp.svg);
}

.sinceheader {
    font-family: Avenir LT Std;
    font-style: normal;
    font-weight: 750;
    font-size: clamp(20px, 9vw, 36px);
    color: #F79101;
    line-height: 94.19%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* width: 90%; */
    text-align: center;
    margin: 5vw 0;
}

.content {
    padding-top: 15%;
}

.since {
    background-color: #414042;
}

.gridcontainer {
    display: grid;
    grid-template-columns: 35% 65%;
    justify-content: center;
    padding: 5vw 0px;
    height: 200vh;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(80px, 100%/2), 1fr));
    height: 200vh;
}

.calendar div p {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: clamp(32px, 3vw, 49.75px);
    line-height: 58px;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

.calendar div:nth-child(1) {
    background-image: url(../img/ourworkmonthly/JAN.png);
}

.calendar div:nth-child(2) {
    background-image: url(../img/ourworkmonthly/FEB.png);
}

.calendar div:nth-child(3) {
    background-image: url(../img/ourworkmonthly/MAR.png);
}

.calendar div:nth-child(4) {
    background-image: url(../img/ourworkmonthly/APR.png);
}

.calendar div:nth-child(5) {
    background-image: url(../img/ourworkmonthly/MAY.png);
}

.calendar div:nth-child(6) {
    background-image: url(../img/ourworkmonthly/JUN.png);
}

.calendar div:nth-child(7) {
    background-image: url(../img/ourworkmonthly/JUL.png);
}

.calendar div:nth-child(8) {
    background-image: url(../img/ourworkmonthly/AUG.png);
}

.calendar div:nth-child(9) {
    background-image: url(../img/ourworkmonthly/SEPT.png);
}

.calendar div:nth-child(10) {
    background-image: url(../img/ourworkmonthly/OCT.png);
}

.calendar div:nth-child(11) {
    background-image: url(../img/ourworkmonthly/NOV.png);
}

.calendar div:nth-child(12) {
    background-image: url(../img/ourworkmonthly/JUN.png);
}

.calendarContainer {
    padding: 0px 48px;
    padding-right: 0;
}

.calendar div {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: left;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

.scrollbarCont{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    height: 150vh;
}

.gridcontainer .article {
    width: 90%;
    height: 100%;
    overflow: auto !important;
}

.gridcontainer .article img {
    width: 100%;
    /* position: relative; */
}

.watch h1 {
    font-family: Avenir LT Std;
    font-style: normal;
    font-weight: 750;
    font-size: clamp(20px, 5vw, 36px);
    text-align: center;
    color: #F8F8F8;
    letter-spacing: 0.05em;
    text-transform: capitalize;
    width: 80%;
    margin: 5vw 0px;
}

.watch {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    padding-bottom: 15%;
}

.layer2 {
    background-image: url(../svg/watch.svg) !important;
    top: auto;
    bottom: 0;
}

.iframeContainer{
    position: relative;
    overflow: hidden;
    width: 70%;
    padding-top: 56.25%;
    margin: 5vw 0;
}

.iframeContainer iframe{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.month:hover, .month:hover *, .month:focus, .month:focus *
{
    color: #F79101 !important;
}

.article::-webkit-scrollbar {
    display: none;
}

@media screen and (max-width: 709px) {
    .gridcontainer {
        display: grid;
        grid-template-columns: 35% 65%;
        justify-content: center;
        padding: 5vw 0px;
        height: 150h;
    }
    .gridcontainer {
        display: flex;
        /* grid-template-columns: 35% 65%; */
        /* padding: 5vw 0px; */
        height: 250vh;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }
    
    .calendar {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(max(80px, 100%/2), 1fr));
        height: 250vh;
    }

    .calendarContainer
    {
        width: 90%;
        padding: 0;
    }

    .scrollbarCont{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
      
        display: none;
        justify-content: center;
        align-items: center;
      
        width: 100%;
        height: 100%;
    }

    .scrollbarCont:target{
        display: flex;
        padding-top: 10%;
        background: rgb(65,64,66, 0.9);
    }

    .scrollbarCont .article
    {
        width: 95%;
        height: 100%;
        overflow: auto !important;
    }
    .link-2 {
        width: 2rem;
        height: 2rem;
        border: 3px solid #ff9900;
        border-radius: 100rem;
        color: inherit;
        font-size: 2rem;
        position: absolute;
        top: 1rem;
        right: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .2s;
        z-index: 2;
        text-decoration: none;
      }
      
      .link-2::before {
        content: '×';
        color: #ff9900;
      }
      
      .link-2:hover,
      .link-2:focus {
        border-color: hsla(0, 0%, 100%, .6);
        transform: translateY(-.2rem);
      }
}