@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation:portrait) {


    .cmsPopupModel {
        margin-right: 15%;
    }

    .cms-scroll-content {
        max-height: 180px;
        overflow-y: auto;
        height: 100rem;
    }

    .cmsContentwithVideo {
        max-height: 180px;
        height: 100rem;
    }

    .cms-scroll-PTcontent {
        max-height: 150px;
        overflow-y: auto;
        height: 100rem;
    }

    .cmsContentwithPTVideo {
        max-height: 150px;
        height: 100rem;
    }

    .navigation-container .helpButton-container .green-btn {
        margin-bottom: 0px;
        margin-left: 10px;
    }

    .navigation-container nav a {
        display: inline-block;
        font-size: 0.8rem;
        height: 100%;
        padding: 5px 10px 5px 10px;
    }

    .to-do-item-container {
        height: 300px;
    }

    .navigation-container nav {
        margin-top: 20px;
    }

        .navigation-container nav a:hover {
            background-color: #ffa631;
            color: white !important;
            padding: 5px 10px 5px 10px;
            height: 100%;
            display: inline-block;
            font-size: 0.8rem;
        }

    .quick-links-container .quick-links-container {
        height: 63px;
    }


    .home-page-content h3 {
        font-family: "oswald";
        font-size: 1.2rem;
        text-transform: uppercase;
        color: white;
        padding: 0px;
        margin: 0px;
    }

    .home-page-content .title-container {
        background-color: var(--main-primary-bg-color);
        border: 1px var(--main-primary-bg-color);
        align-items: center !important;
        justify-content: flex-start !important;
        display: flex !important;
        height: 40px;
        line-height: 40px;
    }

    .quick-links-container .content-container {
        padding: 0px;
    }

        .quick-links-container .content-container .icon {
            font-size: 2.6rem;
        }

        .quick-links-container .content-container .fa {
            font-size: 2.1rem;
        }

        .quick-links-container .content-container span {
            font-size: 1.1rem;
        }

    .current-coverage-container .title-container a {
        padding-left: 5px;
        font-size: 1.2rem;
    }

    .my-info-collapse-container a {
        font-size: 0.7rem;
    }

    .video-container .media-body {
        height: 80px;
    }


    .loginInfo-container a {
        font-size: 15px;
    }

    .left-menu .sideMemu-Container ul li a,
    .left-menu .sideMemu-Container .card-header a {
        font-size: smaller;
    }

    .left-menu .sideMemu-Container .card-header .nav-link {
        padding: 4px 2px;
    }


    /*dependent modal */
    .dependents-modal .modal-dialog {
        max-width: 100%;
    }

    .dependents-modal .docs-heading > div {
        text-transform: none;
        font-size: 13px;
    }

    /*dependent-cards for mobile and tablet*/
    .dependent-box .mob-dependent-header {
        padding-bottom: 10px;
    }

        .dependent-box .mob-dependent-header .card {
            background: var(--main-primary-bg-color);
            padding: 2%;
        }

        .dependent-box .mob-dependent-header .btn-allocation {
            border: none;
            background-color: var(--main-secondary-bg-color);
            color: var(--btn-heading-text-color) !important;
            display: inline-block;
            cursor: pointer;
            border-radius: 0;
            font-weight: 700;
            padding: 1%;
            text-align: center;
            /*text-transform: uppercase;*/
            box-shadow: 0 0 2px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.21);
        }

        .dependent-box .mob-dependent-header div {
            color: var(--page-text-color);
            font-family: 'oswald';
            font-size: 1.2rem;
            padding-left: 3%;
        }

    .dependent-box .header-text {
        color: var(--page-text-color);
        font-family: 'oswald';
        font-weight: 700;
        font-size: 1.25rem;
    }

    .dependent-box .dependent-card .link-text {
        text-decoration: underline;
    }

    .dependent-box .mobile-add-dependent {
        box-shadow: 0 0 2px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.21);
    }



    .dependent-card .card {
        margin-bottom: 5px;
    }

    .dependent-card .btn-floating {
        position: relative;
        vertical-align: middle;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 0px;
        background-color: var(--main-primary-bg-color);
        cursor: pointer;
    }

        .dependent-card .btn-floating i {
            display: inline-block;
            width: inherit;
            color: var(--btn-heading-text-color);
            font-size: 1.25rem;
            line-height: 40px;
            text-align: center;
        }

    .dependent-box .dependent-card .img img {
        height: 72px;
        width: 72px;
        border: 1px solid #c2c0c0;
        border-radius: 100%;
        margin-right: 5px;
        position: relative;
        vertical-align: middle;
    }

    .dependent-box .dependent-card .card-body {
        line-height: 23px;
        padding: 1rem 0 1rem 0;
    }
    /*dependent-cards for mobile and tablet -----end here*/
    .document-page .custom-center {
        margin: auto;
        width: 100%;
        padding: 10px;
    }


    /*ElectionSummary*/
    .electionSummaryPage .current-coverage-container .card {
        margin: 0.6rem 0rem;
    }

    .electionSummaryPage .current-coverage-container .cc-card {
        margin: 0px;
    }

    .electionSummaryPage .current-coverage-container .cc-card {
        font-size: 14px;
    }

    .electionSummaryPage .current-coverage-container .card-body {
        line-height: 20px;
    }

    .electionSummaryPage .current-coverage-container .card-footer .orange-btn {
        width: 100px;
        padding: 1px 15px;
    }

    .electionSummaryPage .current-coverage-container .card-footer div a:last-child, .electionSummaryPage .container-row div a:last-child {
        margin-left: 10px;
    }

    .electionSummaryPage .email-card ul {
        display: block;
        text-align: center;
    }

        .electionSummaryPage .email-card ul li {
            display: inline-block;
            margin: 5px 5px 0px 5px;
        }

    /*BeneficiaryAllocation*/
    .beneficiary-alloctionpage .tab-content .allPlan {
        font-size: 18px;
    }

    .beneficiary-alloctionpage .coverage-header {
        margin: 20px 0px;
    }

    .beneficiary-alloctionpage .allocation-coverage {
        margin: 10px 5px 5px 5px;
    }


    #employee-interactivequestion select,
    #dependent-interactivequestion select {
        width: 90%;
        height: 30px;
    }

    #employee-interactivequestion input[type="text"],
    #dependent-interactivequestion input[type="text"] {
        width: 90%;
        height: 30px;
    }

    /*Plan Header*/
    .plan-content .panel-heading .card-header div {
        padding: 0px;
    }

        .plan-content .panel-heading .card-header div:first-child {
            padding-left: 5px;
        }

    #enrollment {
        margin-top: 30%;
    }

    .electionSummaryPage .CustomCoverage-Container div:nth-child(2) {
        text-align: start;
    }

    .electionSummaryPage .card-chart ul {
        padding-top: 5px;
    }

    .ErrorPage .card {
        margin: 7% 0%;
    }

    .ErrorPage .ErrorRightContainer span {
        margin-left: 0px !important;
        font-size: 350% !important;
    }

    .ErrorPage .card-header span {
        font-size: 200% !important;
    }

    .document-page .browse .input-type {
        width: 65%;
    }

    .left-menu .sideMemu-Container .show:first-of-type a,
    .left-menu .sideMemu-Container .show:first-of-type i {
        line-height: 20px;
    }

    .document-page .doc-table .header-line {
        font-size: 16px;
    }

    .dependent-box #addBeneficiary .green-btn {
        width: unset !important;
    }

    .beneficiary-alloctionpage .cancelAllocation {
        margin-right: 10px;
    }

    .left-menu .sideMemu-Container .card .card-header a {
        font-size: 17px;
    }

    .plan-content .paycheck-per-plan {
        font-size: unset;
    }

    .beneficiary-alloctionpage .select-dependent span {
        font-size: 14px;
    }

    .eoi-container .area .lowersection ul li {
        text-align: center;
        padding: 0px 3px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : landscape) {


    .navigation-container nav a {
        font-size: 0.8rem;
        padding: 5px 10px 5px 10px;
        height: 50%;
    }

    .to-do-item-container {
        height: 300px;
    }

    .navigation-container nav {
        margin-top: 20px;
    }

        .navigation-container nav a:hover {
            background-color: #ffa631;
            color: white !important;
        }

    /* Quick Links*/

    .quick-links-container .quick-links-container {
        height: 63px;
    }


    .quick-links-container .content-container {
        padding: 0px;
    }

        .quick-links-container .content-container .icon {
            font-size: 2.3rem;
        }

        .quick-links-container .content-container .fa {
            font-size: 2rem;
        }

        .quick-links-container .content-container span {
            font-size: 1rem;
        }


    /*.home-page-content .quick-links-container {
        margin-top:20px;
    }*/
    /*.home-page-content .quick-links-container a {
        height: 100px;
    }*/

    .current-coverage-container .title-container a {
        padding-left: 5px;
        font-size: 1.2rem;
    }

    .my-info-collapse-container a {
        font-size: 0.7rem;
    }

    .video-container .media-body {
        height: 210px;
    }

    .green-btn {
        width: 100%;
    }

    .dependent-box #addBeneficiary .green-btn {
        width: unset !important;
    }

    .helpButton-container .green-btn {
        margin-top: 10px;
    }

        .helpButton-container .green-btn:first-child {
            margin-top: 0px;
        }

    /*dependent modal */
    .dependents-modal .modal-dialog {
        max-width: 100%;
    }


    /*dependent-cards for mobile and tablet*/
    .dependent-box .mob-dependent-header {
        padding-bottom: 10px;
    }

        .dependent-box .mob-dependent-header .card {
            background: var(--main-primary-bg-color);
            padding: 2%;
        }

        .dependent-box .mob-dependent-header .btn-allocation {
            border: none;
            background-color: var(--main-secondary-bg-color);
            color: var(--btn-heading-text-color) !important;
            display: inline-block;
            cursor: pointer;
            border-radius: 0;
            font-weight: 700;
            padding: 1%;
            text-align: center;
            /*text-transform: uppercase;*/
            box-shadow: 0 0 2px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.21);
        }

        .dependent-box .mob-dependent-header div {
            color: var(--page-text-color);
            font-family: 'oswald';
            font-size: 1.2rem;
            padding-left: 3%;
        }

    .dependent-box .header-text {
        color: var(--page-text-color);
        font-family: 'oswald';
        font-weight: 700;
        font-size: 1.25rem;
    }

    .dependent-box .dependent-card .link-text {
        text-decoration: underline;
    }

    .dependent-box .mobile-add-dependent {
        box-shadow: 0 0 2px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.21);
    }



    .dependent-card .card {
        margin-bottom: 10px;
    }

    .dependent-card .btn-floating {
        position: relative;
        vertical-align: middle;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 0px;
        background-color: var(--main-primary-bg-color);
        cursor: pointer;
    }

        .dependent-card .btn-floating i {
            display: inline-block;
            width: inherit;
            color: var(--btn-heading-text-color);
            font-size: 1.25rem;
            line-height: 40px;
            text-align: center;
        }

    .dependent-box .dependent-card .img img {
        height: 72px;
        width: 72px;
        border: 1px solid #c2c0c0;
        border-radius: 100%;
        margin-right: 5px;
        position: relative;
        vertical-align: middle;
    }

    .dependent-box .dependent-card .card-body {
        line-height: 23px;
        padding: 1rem 0 1rem 0;
    }
    /*dependent-cards for mobile and tablet -----end here*/

    .document-page .custom-center {
        margin: auto;
        width: 100%;
        padding: 10px;
    }

    .loginInfo-container a {
        font-size: 15px;
    }

    .left-menu .sideMemu-Container ul li a,
    .left-menu .sideMemu-Container .card-header a {
        font-size: medium;
    }

    #PlanTypeTab li a {
        font-size: 110%;
    }

    .plan-content .familytier-premium .right-arrow {
        display: none;
    }


    /*ElectionSummary*/
    .electionSummaryPage .current-coverage-container .card {
        margin: 0.6rem 0rem;
    }

    .electionSummaryPage .current-coverage-container .cc-card {
        margin: 0px;
    }

    .electionSummaryPage .current-coverage-container .cc-card {
        font-size: 14px;
    }

    .electionSummaryPage .current-coverage-container .card-body {
        line-height: 20px;
    }

    .electionSummaryPage .current-coverage-container .card-footer .orange-btn {
        width: 100px;
        padding: 1px 15px;
    }

    .electionSummaryPage .current-coverage-container .card-footer div a:last-child, .electionSummaryPage .container-row div a:last-child {
        margin-left: 10px;
    }

    .electionSummaryPage .email-card ul {
        display: block;
        text-align: center;
    }

        .electionSummaryPage .email-card ul li {
            display: inline-block;
            margin: 5px 5px 0px 5px;
        }

    .depedent-choose-decision {
        font-size: 110%;
    }

    /*BeneficiaryAllocation*/
    .beneficiary-alloctionpage .tab-content .allPlan {
        font-size: 18px;
    }

    .beneficiary-alloctionpage .coverage-header {
        margin: 20px 0px;
    }

    .beneficiary-alloctionpage .allocation-coverage {
        margin: 10px 5px 5px 5px;
    }

    .my-details-picture #photoupload {
        max-width: 302px;
    }

    #employee-interactivequestion select,
    #dependent-interactivequestion select {
        width: 90%;
        height: 30px;
    }

    #employee-interactivequestion input[type="text"],
    #dependent-interactivequestion input[type="text"] {
        width: 90%;
        height: 30px;
    }

    /*Plan Header*/
    .plan-content .panel-heading .card-header div {
        padding: 0px;
    }

        .plan-content .panel-heading .card-header div:first-child {
            padding-left: 5px;
        }

    #enrollment {
        margin-top: 30%;
    }

    .electionSummaryPage .CustomCoverage-Container div:nth-child(2) {
        text-align: start;
    }

    .mydetailContainer .document-page .browse .input-type {
        width: 67%;
    }

    .lifeEvent-page .lifeEvent-box .custom-Save-bttn {
        padding: 2px 2px;
        font-size: 15px;
    }

    .beneficiary-alloctionpage .cancelAllocation {
        margin-right: 20px;
    }

    .paycheck-per-plan {
        font-size: 15px;
    }

    .dependent-box .dependent .col .body .green-btn {
        width: 50%;
    }

    .plan-content .paycheck-per-plan {
        font-size: unset;
    }

    .beneficiary-alloctionpage .select-dependent span {
        font-size: 14px;
    }

    .ErrorPage .card {
        margin: 7% 0%;
    }

    .ErrorPage .ErrorRightContainer span {
        margin-left: 0px !important;
        font-size: 350% !important;
    }

    .ErrorPage .card-header span {
        font-size: 200% !important;
    }
}

/*custom*/
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation:portrait) {
    .home-page-content .quick-links-container {
        margin-top: 20px;
    }

        .home-page-content .quick-links-container a {
            height: 60px;
        }

    .my-details-picture #photoupload {
        max-width: 216px;
        font-size: 14px;
    }

    .my-details .left-side {
        border-right: none;
    }

    .dependent-box #addBeneficiary .green-btn {
        width: unset !important;
    }


    #PlanTypeTab li a {
        font-size: 100%;
    }

    .plan-content .familytier-premium .right-arrow {
        display: none;
    }

    .current-coverage .area {
        padding: 15px 15px;
    }

    .eoi-container .area {
        padding: 15px 15px;
    }

    .standin-container .area {
        padding: 15px 15px;
    }

    .depedent-choose-decision {
        font-size: 110%;
    }

    .plan-content .select-dependent .panel-body {
        font-size: 70%;
        padding: 0 20px 5px 20px;
    }

    .PlanTypeTabContent .interactivequestion ul li .controlers-allignment {
        padding-left: 0;
    }

    #employee-interactivequestion select,
    #dependent-interactivequestion select {
        width: 90%;
        height: 30px;
    }

    #employee-interactivequestion input[type="text"],
    #dependent-interactivequestion input[type="text"] {
        width: 90%;
        height: 30px;
    }

    .document-page .browse .input-type {
        width: 65%;
    }

    .document-page .doc-upload-labeltext #DocumentSave {
        padding: 5px 40px;
    }

    .document-page .doc-table .header-line {
        font-size: 16px;
    }

    .left-menu .sideMemu-Container .card .card-header a {
        font-size: 16px;
    }

    .plan-content .paycheck-per-plan {
        font-size: unset;
    }

    .beneficiary-alloctionpage .select-dependent span {
        font-size: 14px;
    }

    .ErrorPage .card {
        margin: 7% 0%;
    }

    .ErrorPage .ErrorRightContainer span {
        margin-left: 0px !important;
        font-size: 350% !important;
    }

    .ErrorPage .card-header span {
        font-size: 200% !important;
    }
}