﻿@media screen and (min-width: 1024px) {
    .responsive {
      width: 100%;
      height: auto;
      max-width: 800px;
    }

    .img-left {
        float:left;
        margin-top:-40px !important;
        overflow:hidden;
        width:300px;
    }

    .img-right {
        float:right;
        top:2%;
        overflow:hidden;
        width:300px;
    }

    .img-sitech {
        width: 200px;
        margin-top: 24px;
    }

    .circle, .squircle {
      border-top: 0.1em solid rgba(255,255,255,0.4);
      height: 20em;
      position:absolute;
      width: 20em;
    }

    .circle {
      border-radius: 50%;
      box-shadow: 0 1em 2em rgba(0,0,0,0.5);
      left: calc(8% - 10em);
      top: calc(8% - 20em);
      transform-origin: 50% 20em;
    }
    .one {
      background: rgba(0,87,126, 0.6);
      transform: rotateZ(0deg);
    }
    .three {
      background: rgba(0,134,168, 0.6);
      transform: rotateZ(120deg);
    }
    .five {
      background: rgba(165,193,0, 0.6);
      transform: rotateZ(240deg);
    }

    .container {
        min-width:60%;
        width:80%;
    }

    .inputTextBox {
        font-size:16px !important;
        width:300px !important;
        height:50px !important;
    }

    .linkTextLogin {
        padding-bottom:20px;
    }
}

/*IPAD AIR, IPAD AIR PRO*/
@media screen and (min-width: 640px) and (max-width: 1100px) {

    h2 {
        font-size: 20px;
        font-weight:bold;
        padding:0;
        margin-bottom:10px;
    }

    .home-text-info h2 {
        line-height:34px;
    }
    .home-text-info h2, h3 {
        font-size: 20px;
    }

    .home-text-info h4 {
        font-size: 16px;
    }

    .home-text-info h3, h4 {
        line-height:26px;
    }

    .home-text-info h2, h3, h4 {
        max-width:80%;
    }

    .responsive, .container {
      width: 100%;
      height: auto;
      max-width: 640px;
    }

    .container {
        min-width:0%;
    }

    .img-left {
        float:left;
        margin-top:-40px !important;
        overflow:hidden;
        width:300px;
    }

    .img-right {
        float:right;
        top:2%;
        overflow:hidden;
        width:150px;
    }

    .img-sitech {
        width: 150px;
        margin-top: 5px;
    }

    .circle, .squircle {
      border-top: 0.1em solid rgba(255,255,255,0.4);
      height: 10em;
      position:absolute;
      width: 10em;
    }

    .circle {
      border-radius: 50%;
      box-shadow: 0 1em 2em rgba(0,0,0,0.5);
      left: calc(8% - 5em);
      top: calc(8% - 10em);
      transform-origin: 50% 10em;
    }
    .one {
      background: rgba(0,87,126, 0.6);
      transform: rotateZ(0deg);
    }
    .three {
      background: rgba(0,134,168, 0.6);
      transform: rotateZ(120deg);
    }
    .five {
      background: rgba(165,193,0, 0.6);
      transform: rotateZ(240deg);
    }

    .rhdhvheader div h1 {
        font-size:24px;
    }

    .rhdhvheader {
      height:150px;
    }

    .float-left {
        max-width:30%;
    }

    .footer-Text label, .footer-Text a, .text-container p {
        font-size: 14px;
    }

    .footer-Text label {
        text-align:left;
    }

    .modal {
        position:absolute;
        margin: 0 auto;
    }
    .modal-dialog {
        width: 75%;
        margin: 30px auto;
        max-width: 540px;
    }

    .modal-body {
        height: 300px;
    }
    .modal-sm {
        width: 600px;
    }

    .inputTextBox {
        font-size:16px !important;
        width:300px !important;
        height:50px !important;
    }

    .linkTextLogin {
        padding-bottom:20px;
    }

    .rhdhvnavbar a label, .rhdhvnavbar button label {
        width:0;
        display:none;
    }

    /*Request page*/
    .rhdhvfooter {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
      z-index:20;
    }

    .table-responsive table tr td, .table-responsive table tr th {
        font-size:12px;
    }

    nav {
        width:40% !important;
    }

    nav h4 {
        font-size:12px;
        font-weight:bold;
    }

    nav ul li a {
        font-size:12px;
    }

    #modal-container-map .modal-body {
        height: 100% !important;
    }

    #modal-container-map .modal-content {
        width: 95% !important;
        height: 75% !important;
    }

    .modal-confirm-dialog .modal-body {
        width: 100%;
        height:100%;
    }

    .modal-confirm-dialog .modal-content {
        width: 70%; 
        height:30%;
        margin: 30px auto;
    }
}

/*IPAD AIR, IPAD AIR PRO Landscape*/
@media screen and (min-width: 1000px) and (max-height: 800px) {
    #modal-container-map .modal-body {
        height: 500px !important;
    }

    #modal-container-map .modal-content {
        width: 90% !important;
        height: 85% !important;
    }

    .modal-rhdhv .modal {
        margin-top:200px !important;
    }
}

@media screen and (max-width: 640px) {
    .home-text-info h2 {
        font-size: 20px;
        line-height:30px;
    }
    .home-text-info h3 {
        font-size: 18px;
    }

    .home-text-info h4 {
        font-size: 16px;
    }

    .home-text-info h3, h4 {
        line-height:20px;
    }

    .home-text-info h2, h3, h4 {
        max-width:80%;
    }

    .responsive {
      width: 100%;
      height: auto;
    }

    .modal {
        position:absolute;
        margin: 0 auto;
    }
    .modal-dialog {
        width: 85%;
        margin: 30px auto;
        max-width: 400px;
    }
    .modal-body {
        height: 220px;
    }
    .modal-sm {
        width: 350px;
    }

    .modal-header {
        height: 60px;
        padding:5px;
    }

    .modal-header h4 {
        font-size: 13px !important;
    }

    .input-group {
        padding-left: 10px;
    }

    .input-group, .inputTextBox, .linkTextLogin, .linkTextLogin td, .btn {
        font-size: 12px !important;
    }

    .inputTextBox {
        width:200px !important;
        height:36px !important;
    }

    .modal-footer{
        height:60px;
    }

    .modal-mytable tr {
        line-height:10px !important;
    }

    .linkTextLogin {
        padding-bottom:10px;
    }


    .rhdhvnavbar a label, .rhdhvnavbar button label {
        width:0;
        display:none;
    }
}

@media screen and (max-width: 1000px) and (max-height: 500px){
    .home-text-info h2 {
        font-size: 20px;
        line-height:30px;
    }
    .home-text-info h3 {
        font-size: 18px;
    }

    .home-text-info h4 {
        font-size: 16px;
    }

    .home-text-info h3, h4 {
        line-height:20px;
    }

    .home-text-info h2, h3, h4 {
        max-width:80%;
    }

    .responsive {
      width: 100%;
      height: auto;
    }

    .modal {
        position:absolute;
        margin: 0 auto;
    }
    .modal-dialog {
        width: 85%;
        margin: 30px auto;
        max-width: 400px;
    }
    .modal-body {
        height:60%;
        max-height: 200px;
    }
    .modal-sm {
        width: 350px;
    }

    .modal-header {
        height: 40px;
        padding:2px;
    }

    .modal-header h4 {
        font-size: 13px !important;
    }

    .input-group {
        padding-left: 10px;
    }

    .input-group, .inputTextBox, .linkTextLogin, .linkTextLogin td, .btn {
        font-size: 12px !important;
    }

    .inputTextBox {
        width:200px !important;
        height:36px !important;
    }

    .modal-footer{
        height:60px;
    }

    .modal-mytable tr {
        line-height:10px !important;
    }

    .linkTextLogin {
        padding-bottom:5px;
    }
}