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

.main{
    max-width: 1200px;
    margin: 50px 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) {
@keyframes animX{
0% {left: 60%;}
100% {left: 30%;}
}
@keyframes animY{
0% {top: 10%;}
100% {top: 30%;}
}
.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 {
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%;
}
}