.nav {
            height: 400px;
            background: url(../img/maskGroup.png);
            background-size: cover;
            margin: 0 auto;
            z-index: -1;
        }

        .main{
            max-width: 1200px;
            margin: 0 auto;
            z-index: 99;
            transform: translateY(-85px);
        }
        .main .track-order{
            width: 100%;
            padding: 37px 50px 0 50px;
            box-sizing: border-box;
            background-color: #fff;
            padding-bottom: 157px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
            border-radius: 10px;
        }
        .main .track-order-t{
            font-weight: 700;
            font-size: 32px;
            color: #011A22;
            padding: 0 0 20px 0;
            text-align: center;
            border-bottom: 1px solid #898989;
        }
        .order-lookup{
            font-weight: 700;
            font-size: 32px;
            color: #011A22;
            padding-left: 74px;
            padding-top: 74px;
        }
        .track-order-b{
            padding: 50px 0 0 105px;
            display: flex;
        }
        .low-graph{
            width: 36%;
            margin-right: 90px;
            margin-top: 31px;
          position: relative;
          }
        .form-right{
          width: 64%;
          box-sizing: border-box;
        }
        .form-right  .order-number{
            padding-top: 15px;
        }
        .form-right>div{
            font-weight: 700;
        font-size: 16px;
        color: #011A22;
        padding-bottom: 15px;

        }
        .form-right input {
        width: 100%;
        font-size: 20px;
        border: 1px solid #D6D6D6;
        border-radius: 4px;
        outline: none;
        padding: 15px 5px;
        box-sizing: border-box;
        }
        .form-right input:hover{
            border: 1px solid #11B5ED;
          }
          .form-right input:focus{
            border: 1px solid #11B5ED;
          }
        .form-right p{
            font-weight: 400;
            font-size: 16px;
            color: rgba(1, 26, 34, 0.5);
            padding-top: 7px;
            padding-bottom: 33px;
        }
        .form-right button{
            font-weight: 400;
            font-size: 18px;
            color: #fff;
            padding: 12px;
            border: 0;
            outline: none;
            border-radius: 4px;
            background: #1169ED;
        }

        @keyframes animX{
            0% {left: -70px;}
            100% {left: 0px;}
        }
        @keyframes animY{
            0% {top: -10px;}
            100% {top: 30px;}
        }
  
        #ball {
          position: absolute;
          left: -70px;
          top: -10px;
          animation: animX 1.4s cubic-bezier(0.36,0,0.64,1) -0.7s infinite alternate, animY 1.4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;
      }
  
      #lopp {
          width: 498px;
          height: 498px;
          border: 2px solid #999;
          border-radius: 50%;
          position: absolute;
          left: 9px;
          top: 9px;
      }

.form-right .input-email-error,.input-emailFormat-error,.order-number-error,.order-numberFormat-error{
    color: red !important;
}

.tips-email.error,.tips-number.error{
    border: 1px solid red;
}
.track-order-md-t {
    display: none;
}
@media (min-width: 768px) and (max-width: 1200px) {
    .d_header .advertisement{
        font-size: 38px;
    }
    .d_header .header_Nav {
        padding: 10px 0;
    }
    .track-order-t {
        display: none;
    }
    .nav {
        height: 470px;
        background-position: center;
    }
    .main {
        max-width: 100%;
        padding: 0 45px;
        transform: translateY(-170px);
    }
    .order-lookup {
        display: none;
    }
    .low-graph {
        display: none;
    }
    .track-order-b{
        padding-left: 0;
        justify-content: center;
    }
    .text-md-center {
        text-align: center !important;
    }
    .track-order-md-t {
        display: block;
    }
    .form-right {
        width: 100%;
        padding: 0 25px;
    }
    .form-right button {
        box-shadow: none;
    }
    .main .track-order {
        padding-bottom: 67px;
    }
}

@media (max-width:767.9px) {
    .d_header .advertisement{
        font-size: 20px;
    }
    .d_header .header_Nav {
        padding: 9px 0 !important;
    }
    .track-order-t {
        display: none;
    }
    .nav {
        height: 150px;
        background-position: center;
    }
    .main {
        max-width: 100%;
        padding: 0 16px;
        transform: translateY(-33px);
    }
    .order-lookup {
        display: none;
    }
    .track-order-b{
        padding-left: 0;
        justify-content: center;
        flex-direction: column;
    }
    .text-md-center {
        text-align: center !important;
    }
    .main .track-order-md-t {
        display: block;
        font-size: 16px;
        border: none;
    }
    .form-right {
        width: 100%;
        padding: 0 25px;
    }
    .form-right button {
        box-shadow: none;
    }
    .main .track-order {
        padding: 24px 7px;
    }
    #ball {
        animation: none;
        width: 160px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -70%);
    }
    .low-graph {
        width: 100%;
        text-align: center;
        margin: 0;
        padding:  0 90px;
    }
    .low-graph img{
        max-width: 100%;
    }
}