.hidden {
  display: none;
  opacity: 0;
}

.mobile {
    display: none;
}

.bnpp-video-grid-2 {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 0 20px 0;
    min-height: 643px;
    
    .video_content {
        display: grid;
        grid-template-columns: repeat(2, 610px);
        gap: 33px;
        justify-content: center;

        .other_video_grid {
            border-radius: 10px;
            width: 610px;
            height: 300px;
            position: relative
        }

        .first_video_grid{
            border-radius: 10px;
            grid-column: span 2;
            width: 1253px;
            height: 622px;
            position: relative;
        }
    }
}

.bnpp-video-grid-2 .dark{
    background-color: #0C2728;
}

.bnpp-video-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0;
  min-height: 643px;

  .video_content {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 1253px;
    flex-wrap: wrap;
    gap: 6px;
    opacity: 1;
    transition: opacity 0.3s ease;
    position: relative;

    .first_video {
        width: 1253px;
        height: 352px;
        border-radius: 10px;
        position: relative;
    }

    .second_video {
        width: 1253px;
        height: 286px;
        border-radius: 10px;
        position: relative;
    }

    .other_video {
        width: 413px;
        height: 286px;
        border-radius: 10px;
        position: relative;
    }

    .other_wide_video {
        width: 623px;
        height: 286px;
        border-radius: 10px;
        position: relative;
    }
  }
}



.bnpp-video-grid.dark {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0;
  background-color: #0C2728;

  .video_content {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 1253px;
    flex-wrap: wrap;
    gap: 6px;
    opacity: 1;
    transition: opacity 0.3s ease;
    position: relative;

    .first_video {
        width: 1253px;
        height: 352px;
        border-radius: 10px;
        position: relative;
    }

    .second_video {
        width: 1253px;
        height: 286px;
        border-radius: 10px;
        position: relative;
    }

    .other_video {
        width: 413px;
        height: 286px;
        border-radius: 10px;
        position: relative;
    }

    .other_wide_video {
        width: 623px;
        height: 286px;
        border-radius: 10px;
        position: relative;
    }
  }
}

.first_video .title_content, .first_video_grid .title_content {
    position: absolute;
    top: 63px;
    left: 61px;
    color: #FFF;
    font-family: "BNPP Sans Condensed";
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.5px;

    .title {
        font-size: 48px;
    }

    .sub_title {
        font-size: 40px;
        margin: 0;
    }
}

.first_video .text_content, .first_video_grid .text_content {
    color: #FFF;
    font-family: "BNPP Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
    letter-spacing: 0.5px;
    position: absolute;
    left: 61px;
    bottom: 36px;

    p {
        width: 237px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.first_video .button_play, .first_video_grid .button_play {
    position: absolute;
    left: 568px;
    top: 128px;
    width: 118px;
    height: 118px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
}

.dark .first_video .button_play, .dark .first_video_grid .button_play {
    position: absolute;
    left: 568px;
    top: 128px;
    width: 118px;
    height: 118px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_dark.svg?1=1);
}

.other_video .button_play {
    position: absolute;
    left: 176px;
    top: 113px;
    width: 61px;
    height: 61px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
}

.other_video_grid .button_play {
    position: absolute;
    left: 276px;
    top: 120px;
    width: 61px;
    height: 61px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
}

.dark .other_video .button_play {
    position: absolute;
    left: 176px;
    top: 113px;
    width: 61px;
    height: 61px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_dark.svg?1=1);
}

.dark .other_video_grid .button_play {
    position: absolute;
    left: 276px;
    top: 120px;
    width: 61px;
    height: 61px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
}

.other_video .text_content, .other_video_grid .text_content  {
    color: #FFF;
    font-family: "BNPP Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
    letter-spacing: 0.5px;
    position: absolute;
    left: 61px;
    bottom: 18px;

    p {
        width: 288px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.other_video .title_content, .other_video_grid .title_content  {
    position: absolute;
    top: 18px;
    left: 61px;
    color: #FFF;
    font-family: "BNPP Sans Condensed";
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.5px;

    .title {
        font-size: 40px;
        margin: 0 0 8px 0;
    }

    .sub_title {
        font-size: 30px;
        margin: 0;
    }
}

.other_wide_video .button_play {
    position: absolute;
    left: 274px;
    top: 113px;
    width: 61px;
    height: 61px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
}

.second_video .button_play {
    position: absolute;
    left: 568px;
    top: 113px;
    width: 108px;
    height: 108px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
}
.dark .second_video .button_play {
    position: absolute;
    left: 568px;
    top: 113px;
    width: 108px;
    height: 108px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_dark.svg?1=1);
}

.dark .other_wide_video .button_play {
    position: absolute;
    left: 274px;
    top: 113px;
    width: 61px;
    height: 61px;
    border: none;
    cursor: pointer;
    background: no-repeat center / 100% 100% url(../assets/play_dark.svg?1=1);
}

.other_wide_video .text_content, .second_video .text_content {
    color: #FFF;
    font-family: "BNPP Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
    letter-spacing: 0.5px;
    position: absolute;
    left: 61px;
    bottom: 18px;

    p {
        width: 288px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.other_wide_video .title_content, .second_video .title_content {
    position: absolute;
    top: 18px;
    left: 61px;
    color: #FFF;
    font-family: "BNPP Sans Condensed";
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.5px;

    .title {
        font-size: 40px;
        margin: 0 0 8px 0;
    }

    .sub_title {
        font-size: 30px;
        margin: 0;
    }
}

.iframe_content {
    width: 1253px;
    height: 647px;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s ease;

    .close_iframe, .close_mobile_iframe {
        border: 1px solid white;
        border-radius: 50%;
        position: absolute;
        top: 49px;
        right: 39px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        background: no-repeat center / 100% 100% url(../assets/close_light.svg?1=1);
    }
}

.dark .iframe_content {
    width: 1253px;
    height: 647px;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s ease;

    .close_iframe, .close_mobile_iframe {
        border: 1px solid white;
        border-radius: 50%;
        position: absolute;
        top: 49px;
        right: 39px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        background: no-repeat center / 100% 100% url(../assets/close_dark.svg?1=1);
    }
}

.video {
    transition: all 0.5s ease;
}

.video.active {
    position: absolute !important;
    width: 1253px !important;
    height: 647px !important;
    z-index: 10;
}

.video.active .button_play {
    top: 50%;
    left: 50%
}

@media (max-width: 1253px) { 
    .bnpp-video-grid-2 {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px 20px 20px 20px;
        
        .video_content {
            display: grid;
            grid-template-columns: repeat(2, minmax(300px, 610px));
            gap: 33px;
            justify-content: center;

            .other_video_grid {
                border-radius: 10px;
                width: 100%;
                height: 300px;
                position: relative;
                
                .button_play {
                    position: absolute;
                    left: 276px;
                    top: 120px;
                    width: 61px;
                    height: 61px;
                    border: none;
                    cursor: pointer;
                    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
                }
            }

            .first_video_grid{
                border-radius: 10px;
                grid-column: span 2;
                width: 100%;
                height: 622px;
                position: relative;

                .button_play {
                    position: absolute;
                    left: 276px;
                    top: 120px;
                    width: 61px;
                    height: 61px;
                    border: none;
                    cursor: pointer;
                    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
                }
            }
        }
    }

    .video.active {
        position: absolute !important;
        width: 65vw !important;
        height: 43vh !important;
        z-index: 10;
    }
}

/* styles for mobile version */

@media (max-width: 768px) { 

    .iframe_content {
        width: 312px;
        height: 176px;
        position: relative;
        opacity: 1;
        transition: opacity 0.3s ease;

    }
    .video.active {
        position: absolute !important;
        width: 312px !important;
        height: 176px !important;
        z-index: 10;
    }

    .bnpp-video-grid-2, .bnpp-video-grid {
        display : none;
    }

    .mobile {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px 0 20px 0;
        gap: 30px;
    
        .video_content {
            display: flex;
            justify-content: center;

            .other_video_grid, .other_wide_video, .first_video {
                border-radius: 10px;
                width: 312px;
                height: 176px;
                position: relative;

                .button_play, .button_play_mobile {
                    position: absolute;
                    left: 140px;
                    top: 72px;
                    width: 32px;
                    height: 32px;
                    border: none;
                    cursor: pointer;
                    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
                }
            }

            .first_video_grid{
                border-radius: 10px;
                width: 312px;
                height: 176px;
                position: relative;
                
                .button_play, .button_play_mobile {
                    position: absolute;
                    left: 140px;
                    top: 72px;
                    width: 32px;
                    height: 32px;
                    border: none;
                    cursor: pointer;
                    background: no-repeat center / 100% 100% url(../assets/play_light.svg?1=1);
                }
            }
        }
    }

    .bnpp-video-grid {
        position:relative;
    }

    .bnpp-video-grid .video_content{
        height:auto!important;
        justify-content: center!important;
        margin: 12px auto 6px auto !important;
    } 

    .entry-content.bnpp-container, .bnpp-video-grid, .video_content {
         width: 100%!important; 
         padding:0px!important; 
         margin:0px!important; 
    }
    
    .video.first_video,  .video.other_wide_video, .video.first_video_grid, .video.other_video {
        width:312px!important;
        height:176px!important;
        margin:0px 39px 6px 39px!important; 
        padding:10px!important;
    }

    .video_content .title_content .title{
        font-family: "BNPP Sans Condensed"!important;
        font-size: 24px!important;
        font-style: normal!important;
        font-weight: 400!important;
        line-height: normal!important;
        letter-spacing: 0.5px!important;     
    }

    .video_content .title_content .sub_title{
        font-family: "BNPP Sans Condensed"!important;
        font-size: 20px!important;
        font-style: normal!important;
        font-weight: 400!important;
        line-height: normal!important;
        letter-spacing: 0.5px!important;
     
    }

    .video_content .text_content p { 
        font-family: "BNPP Sans"!important;
        font-size: 14px!important;
        font-style: normal!important;
        font-weight: 400!important;
        line-height: 20px!important;
    }

   .first_video .title_content, .other_wide_video .title_content, .second_video .title_content, .first_video_grid .title_content {
       top: 21px;
       left: 24px;
   } 

    .first_video .text_content, .other_wide_video .text_content, .second_video .text_content, .first_video_grid .text_content {
       top: 123px;
       left: 24px;  
    }
     
    .first_video .text_content, .other_wide_video .text_content, .second_video .text_content, .first_video_grid .text_content { 
       p { 
        width: 244px; 
        white-space:unset;
        text-overflow:unset;
        }
    }

    .first_video .button_play, .other_wide_video .button_play, .first_video_grid .button_play, .other_video_grid .button_play, .other_video .button_play {
        position: absolute;
        left: 45%;
        top: 45%;
        width: 32px;
        height: 32px;
    }

    .first_video .button_play_mobile, .other_wide_video .button_play_mobile, .first_video_grid .button_play_mobile, .other_video_grid .button_play_mobile, .other_video .button_play_mobile {
        position: absolute;
        left: 45%;
        top: 45%;
        width: 32px;
        height: 32px;
    }
    
    .iframe_content {
        .close_mobile_iframe {
            top: 5%;
            right: 5%;
        }
    }

    #iframe-0 .close_iframe,#iframe-1 .close_iframe,#iframe-2 .close_iframe{
        top:15px;
        right:15px;
    }

    .bnpp-video-grid iframe {
        border:none;
        outline:none;
    }
    
    .second_video .button_play, .second_video .button_play_mobile {
        left: 45%;
        top: 45%;
        width: 32px;
        height: 32px;
    }
}