﻿
@media screen and (max-width: 991px) and (orientation: portrait) {
    .nav-link {
        float: right !important;
    }
   
    
    .nav-link span {
        font-size: 20px !important;
    }
    .modal-xsm, .modal-sm, .modal-md, .modal-lg, .modal-xl { 
        margin-top: 15%!important;
        max-width: 70% !important; 
    } 
  
    .custom-margin-container {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    } 

    .continuum-selection h2 {
        font-size: 2.5vw !important
    }

    .panel-link span {
        margin-left: 22%;
        font-size: 2.5vw !important;
    }

    .play-video-link span {
        font-size: 2.5vw !important;
    }

    .customVideoModal-dialog { 
        min-width: 80% !important;
        margin-top: 100px !important; 
    }
    
    .customVideoModal-dialog i{
        margin-left: -30px !important;
        font-size:30px!important;
    }

    .step-font-size-sm p { 
        font-size: 2vw !important;
    }

    .panel1 span {
        font-size: 4.5vw !important;
    }
	
    .play-video-link span,
    .panel1 .fa{ 
        font-size: 3vw !important;
    }  
	
    .quote {
        padding-right: 1vw !important;
        margin-top: 5vh !important;
    }

    .quote span p {
        font-size: 2.8vw !important;
    }

    .quote .author span {
        font-size: 2vw !important;
        line-height: 150px;
    }

    .contact-us-info {
        border-right: 0px;
        padding-left: 10% !important;
    }

    .btn span {
        display: none;
    }

    .custom-container, .custom-container-sm {
        max-width: 95% !important;
    }

    .custom-container .container-fluid {
        margin-left: 0rem !important;
    }

    .custom-container .modal-header, .custom-container .modal-footer {
        width: 100% !important;
    }
    .custom-container-lg {
        max-width: 100%; 
    }
    .ml-3 {
        margin-left: 0px !important;
    }
    .videoStyle {
        height: 400px !important;
    }
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .btn span {
        display: none;
    }
}

    @media screen and (max-width: 768px) {

        .bg-image {
            width: 100vw;
            height: 86vh;
            background-size: 180% 100%;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }

        .history-section-label1 {
            font-size: 6vw !important;
        }

        .history-section-label2 {
            margin-top: 2.5vh !important;
            font-size: 2.5vw !important;
            padding: 2px !important;
        }

        .step-font-size-sm p {
            font-size: 1.9vw !important;
            line-height: 3vw !important;
        }

        .footer-header {
            font-size: 2.2vw !important;
        }

        .footer-header-content {
            font-size: 1.9vw !important;
        }

            .footer-header-content p {
                line-height: 1.8vh !important;
            }


        /*Responsive Card-list-table*/
        /* Force table to not be like tables anymore */
        .no-more-tables table,
        .no-more-tables thead,
        .no-more-tables tbody,
        .no-more-tables th,
        .no-more-tables td,
        .no-more-tables tr {
            display: block;
        }

            /* Hide table headers (but not display: none;, for accessibility) */
            .no-more-tables tr th {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .no-more-tables tr {
            border: 1px solid #ccc;
        }

        .no-more-tables td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
            white-space: normal;
            text-align: left;
        }

            .no-more-tables td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                text-align: left;
                font-weight: bold;
            }

            /*
	Label the data
	*/
            .no-more-tables td:before {
                content: attr(data-title);
                color: #0071bb !important;
                font-family: Raleway-Light !important;
            }

        .btn-table {
            text-align: right !important;
        }
        /*.no-more-tables [data-title]:hover::before, .no-more-tables [data-title]:hover::after {
        display: block;
    }*/
        .videoStyle {
            height: 350px !important;
        }

        .sample-timeline-content {
            max-width: 100% !important;
        }

            .sample-timeline-content span {
                font-size: 3.5vh !important;
            }

            .sample-timeline-content h1 {
                font-size: 3vh !important;
                margin-top: 5% !important
            }

            .sample-timeline-content p {
                font-size: 2vh !important;
            }

            .sample-timeline-content button {
                font-size: 1.6vh !important;
                margin-top: 3vh !important;
                margin-bottom: 5vh !important
            }

        .sample-timeline-content-right {
            margin-left: 0% !important;
        }

        .bg-image-small-right-2 {
            background-position: 80% 35%;
            background-size: 25% 85%;
        }

        .bg-image-custom-right, .bg-image-custom-left, .bg-image-custom-right-long {
            height: 0vh !important;
        }

        .bg-image-small-right-2 {
            background-size: 20% 80%;
        }

        .welcome-timeline-content h1 {
            font-size: 4vh !important
        }

        .welcome-timeline-content button, .welcome-timeline-content, .welcome-timeline-content p {
            font-size: 2vh !important
        }

        .welcome-panel {
            min-height: 30vh !important;
        }

        .bg-image-small-right {
            background-size: 25% 40% !important;
        }

        .bg-image-small-custom {
            background-position: 75% 60% !important;
            background-size: 10% 60% !important;
        }

        .sample-container button, .sample-container h2 {
            margin-top: 3.5vh !important;
            margin-bottom: 3.5vh !important;
            font-size: 1.5vh !important;
        }
    }

    /* Samsung Galaxy S5 ----------- */
    @media only screen and (max-height: 640px) and (orientation : landscape) {
        .nav-link {
            float: right !important;
        }

        .bg-image {
            width: 100vw;
            height: 185vh !important;
            background-size: 180% 100%;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }

        .custom-container, .custom-container-sm {
            max-width: 95% !important;
        }

            .custom-container .container-fluid {
                margin-left: 0px !important;
            }

            .custom-container .modal-header, .custom-container .modal-footer {
                width: 100% !important;
            }

        .panel-link span {
            font-size: 4.5vh !important;
        }

        .play-video-link span,
        .panel1 .fa {
            font-size: 2.5vw !important;
        }

        .row-header {
            justify-content: center !important;
            text-align: center !important;
        }

        .label-header-light {
            font-size: 3vw !important;
            margin-bottom: 0px !important;
        }

        .history-section-label1 {
            font-size: 6vw !important;
        }

        .history-section-label2 {
            margin-top: 6vh !important;
            padding: 0px !important;
            font-size: 2.5vw !important;
        }

        .step-font-size-sm {
            font-weight: bold;
        }

            .step-font-size-sm p {
                line-height: 7vh !important;
                font-size: 2vw !important;
            }


        .know-more {
            height: 40vh !important;
        }

        .get-started-row {
            margin-top: 5% !important;
        }

        .footer-header {
            font-size: 4vh !important;
        }

        .footer-header-content {
            margin-top: 1vh !important;
            font-size: 3.5vh !important;
        }

            .footer-header-content p {
                line-height: 3.5vh !important;
            }

        .py-4 {
            padding-top: 0.5rem !important;
        }

        .btn-lg {
            font-size: 2vw !important;
        }

        .custom-margin-container {
            margin-left: 0.1rem !important;
            margin-right: 0.1rem !important;
        }

        .nav-link .nav-label {
            font-size: 20px !important;
        }

        .quote {
            margin-top: 0vh !important;
        }

            .quote span p {
                font-size: 2.5vw !important;
            }

            .quote .author span {
                font-size: 2vw !important;
            }

        .about-us-quote {
            margin-left: 0px !important;
            text-align: center !important;
        }

        .btn span {
            display: none;
        }

        .videoStyle {
            height: 300px !important;
        }



        .sample-timeline-content span {
            font-size: 10vh !important
        }

        .sample-timeline-content-right {
            margin-left: 10% !important;
        }

        .sample-timeline-content h1 {
            font-size: 5.5vh !important
        }

        .sample-timeline-content p {
            font-size: 4.5vh !important;
        }

        .sample-timeline-content button {
            font-size: 4vh !important;
            margin-top: 5vh !important;
        }

        .bg-image-custom-right, .bg-image-custom-left {
            height: 75vh !important;
        }

        .bg-image-custom-right-long {
            height: 100vh !important;
        }

        .welcome-timeline-content h1 {
            font-size: 6vh !important
        }

        .welcome-timeline-content button, .welcome-timeline-content, .welcome-timeline-content p {
            font-size: 4vh !important
        }

        .bg-image-small-right {
            background-size: 20% 35% !important;
            background-position: 100% 45% !important;
        }

        .bg-image-small-custom {
            background-position: 75% 70% !important;
            background-size: 10% 75% !important;
        }

        .sample-container button, .sample-container h2 {
            margin-top: 7vh !important;
            margin-bottom: 7vh !important
        }
    }
 