.mobileview  video,#vide_0, .mobileview  video video{
    box-shadow: none!important;
    outline: none!important;
    border: none!important;
}

/* media query for font size*/
/* 300px X 768 scale  portrait*/
@media  screen and (min-width: 300px) and (max-width: 767px) and (orientation: portrait) {
    .hero-img h4 {
        bottom: -6%!important;
        
    }
    .hero p {
        margin: 20px 0 0 0;
    }
    .banner-section .banner-inner-content {
        margin: 0 0 15px 0;
    }
    #questionCarousel .carousel-item > .row.h-100 {
        align-content: flex-start;
        height: auto !important;
    }
    #questionCarousel .carousel-item .mobileview:first-child {
        /* margin-top: -40px; */
        /* height: 41% !important; */
        height: auto !important;
        /* overflow: hidden; */
    }
    #preTestModal.modal #questionCarousel .vjs-fluid {
        /* clip-path: inset(40px 0 70px 0); */
        height: auto !important;
        /* top: -40px; */
    }

    #vide_1.vjs-fluid:not(.vjs-audio-only-mode),#vide_2.vjs-fluid:not(.vjs-audio-only-mode)  {
        /* padding-top: 112.25%; */
    } 
    #preTestModal.modal #questionCarousel .vide_0-dimensions.vjs-fluid {
        /* clip-path: inset(0px 0 70px 0);         */
    }
    #preTestModal.modal #questionCarousel .video_inner_wrapper {
        /* height: 100% !important; */
        /* height: 365px!important; */
        height: 270px !important;
        overflow: hidden;
        border-radius: 100%;
        width: 270px;
        display: block;
        margin: 25px auto 0 auto;
    }
    #preTestModal.modal #questionCarousel .video_inner_wrapper video {
        /* clip-path: inset(0px 0 70px 0); */
        height: auto !important;
    }
    #preTestModal.modal #questionCarousel .carousel-inner {
        height: auto !important;
        border-radius: 0px !important;
    }
    #preTestModal.modal #questionCarousel .question-wrap .button-wrap {
        margin-bottom: 10px;
    }
    #preTestModal.modal #questionCarousel .question-wrap .feedback-wrap {
        min-height: 90px;
    }
    #preTestModal.modal #questionCarousel .question-wrap .question-step {
        margin: 2px 0 24px;
    }
    #preTestModal.modal #questionCarousel .question-wrap {
        padding: 10px 20px 10px 20px !important;    
    }
    .vide_1-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 120.25%;
    }

    #preTestModal.modal #questionCarousel .question-wrap .question-text {
        min-height: auto !important;
    }
    .mobileview .video_inner_wrapper  {
        position: relative;

    }
    .mobileview .video-js .vjs-big-play-button {
       position: absolute;
        top: 120px;
        left: 56%;
    
    }
    .launch {
        width: 130px;
        height: 43px;
        padding: 12px 12px;
    }    
    .launch-info {
        padding-top: 10px;
    }

}
/* media query for font size*/
@media  screen and (min-width: 300px) and (max-width: 960px) and (orientation: landscape) {
    :root{
        --transcript-font-size: 16px;
        --bodyfont: 16px;
        --fontsize_xs: 14px;
        --fontsize_x: 20px;
        --fontsize_1x: 16px;
        --fontsize_2x: 18px;
        --fontsize_3x: 24px;
        --fontsize_4x: 30px;
        --fontsize_3_4x: 24px;
    }
    .banner-section .lifesaver-logo {
        width: 45%;
    }
    .hero p {
        line-height: 22px;
        min-height: 24px;
        margin: 10px 0;
    }
    #about .left-content-cont{
        max-width: 781px;
    }
    .banner-section .banner-inner-content {
        margin: 0 0 15px 0;
    }
    #video_Main_wrapper .video_inner_wrapper {
        /* padding: 0 9%; */
    }
    #preTestModal.modal #questionCarousel .carousel-inner {
        height: 250px !important;
    }
    #preTestModal.modal #questionCarousel .question-wrap {
        padding: 0px 10px 10px 0px !important;
    }
    #preTestModal.modal #questionCarousel .question-wrap .question-text {
        min-height: auto !important;
        font-size: 16px !important;
        margin-bottom: 5px !important;
        line-height: 16px !important;
    }
    #questionCarousel .carousel-item .mobileview:last-child {
        padding: 0 5px 0 5px;
    }
    #preTestModal.modal #questionCarousel .question-wrap .question-step {
        margin: 5px 0 7px !important;
    }
    #preTestModal.modal #questionCarousel .question-wrap .question-step p {
        font-size: 18px !important;
        line-height: 21px !important;
    }
    #preTestModal.modal #questionCarousel .question-wrap .button-wrap {
        margin-bottom: 10px !important;
    }
    #preTestModal.modal #questionCarousel .question-wrap .button-wrap .btn {
        width: 60px !important;
        height: 30px !important;
        line-height: 24px !important;
    }
    #preTestModal.modal #questionCarousel .question-wrap .question-inst {
        margin-bottom: 5px !important;
        font-size: 16px !important;
    }
    #preTestModal.modal #questionCarousel .question-wrap .feedback-wrap .feedback p {
        line-height: 16px !important;
    }
    .launch {
        width: 130px;
        height: 43px;
        padding: 12px 12px;
    }
    .launch-info {
        padding-top: 10px;
    }
    .banner-section {
        padding-top: 10px;
    }

}
/* 1024 X 768 scale */
@media screen and (min-width: 800px) and (max-width: 1278px){

    .hero p {
        color: var(--contrast-color);
        margin: 10px 0 10px 0;
        font-size: var(--bodyfont);
        line-height: 28px;
        min-height: 38px;
    }
    .about .right-content-wrap ul li {
        font-size: var(--bodyfont);
        line-height: 29px;
        color: #394962;
        margin-top: 2px;
    }

    .launch {
        width: 110px;
        height: 38px;
        color: #0071E3;
        background: var(--background-color);
        font-family: var(--heading-font);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 1px;
        padding: 10px 2px;
        border-radius: 5px;
        transition: 0.3s;
        text-align: center;
        border: 2px solid #0071E3;
        text-transform: uppercase;
    }
    .banner-section .lifesaver-logo {
        width: 85%;
  
    }
    .banner-section .banner-inner-content {
        margin: 4px 0;
    }

}  




/* 1366 X 768 scale */
@media screen and (min-width: 1358px) and (max-width: 1439px){


    .banner-inner-content{
        width: 90%!important;
    }
    .banner-section .banner-inner-content {
        margin: 20px 0;
    }
    .banner-section .lifesaver-logo {
        width: 65%!important;
       
    }
    .icon-container img {
        width: 22%;
  
    }

    .mobileview {
        width: 49.2%!important;
    }    


}  


/* 1920 X 1080 at 125% scale */
@media screen and (min-width: 1440px) and (max-width: 1930px) and (-webkit-min-device-pixel-ratio: 1.25){
    .mobileview {
        width: 48.2%;
    }
    /* body{
        background:rgb(255, 0, 149)!important;
    } */
    .video-js .vjs-big-play-button {
        font-size: 2.4em;
    }
    .custom-width {
        width: 82%;
    }
    #video_Main_wrapper .video_inner_wrapper {
       padding-top: 24px;
    }
  .main {
        margin-top: 46px;
    }
    .banner-section .lifesaver-logo {
        width: 82%;
        height: auto;
    } 

     .hero p {
        margin: 18px 0 25px 0;
        font-size: 18px;
    
    }
    .about .icon-container p {
        width: calc(100% - 82px);
        font-size: 18px;
        line-height: 24px;
    }
    .header h1 {
        font-size: 19px;
        height: 36px;
        line-height: 36px;
    }
    .banner-section .banner-inner-content {
        margin: 40px 0;
    }
    .about .right-content-wrap ul li {
        font-size: 18px;
        margin-top: 0px;
    }
    .icon-container img{
        width: 25%;
    }
    .about .right-content-wrap {
        padding: 15px 28px 10px;
    } 

}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    :root{
        --bodyfont: 22px;
        --fontsize_x: 24px;
        --fontsize_xs: 18px;
    }

    .mobileview {
        width: 48.2%;
    }

    .hero-img h4 {
        bottom: 0%;
    }
    .header .logo {
        width: 10%;
    }
    .about .topic-row {
        justify-content: space-between;
    }
    .about .icon-container {
        width: 47%;
    }
    .top_banner_cont {
        align-items: center;
    }
    .index-page .banner-section .banner-inner-content {
        margin: 0 0 30px 0;
    }
    .index-page .main {
        height: 100%;
    }
    .index-page .about {
        height: 100%;
    }

}

@media only screen and (max-width: 1200px) and (min-width: 768px) and (orientation: landscape) {
    :root{
        --bodyfont: 22px;
        --fontsize_x: 24px;
        --fontsize_xs: 18px;
    }
    .index-page .banner-section {
        padding-top: 10px;
    }
    .index-page .launch-info {
        padding-top: 10px;
    }
    .banner-section .banner-inner-content {
        margin: 4px 0 20px;
    }
    .about .topic-row {
        justify-content: space-between;
    }
    .about .icon-container {
        width: 48%;
    }
    .hero p {
        min-height: auto;
    }
    .mobileview {
        width: 48.2%;
    }
}
@media (min-width: 768px) and (max-width:1270px)  {
    .mobileview {
        width: 50%!important;
    }
}


@media (min-width:1280px) and (max-width:1560px)  {
    .mobileview {
        width: 48.2%!important;
    }
}
@media (min-width: 1590px) and (max-width:1900px)  {
    .mobileview {
        width: 50%!important;
    }
}
@media (min-width:1910px)  {
    .mobileview {
        width: 46.2%!important;
    }
}
@media  screen and (min-width: 600px) and (max-width: 750px) and (orientation: landscape) {
    #video_Main_wrapper .video_inner_wrapper {
        padding: 0 9%;
    }
}