.backgroundCover, #home, #download, #packages, #subscribe, footer{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
@font-face{font-family:'thaisans_neueregular';src:url('font/thaisansneue-regular-webfont.eot');src:url('font/thaisansneue-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/thaisansneue-regular-webfont.woff2') format('woff2'),
url('font/thaisansneue-regular-webfont.woff') format('woff'),
url('font/thaisansneue-regular-webfont.ttf') format('truetype'),
url('font/thaisansneue-regular-webfont.svg#thaisans_neueregular') format('svg');font-weight:normal;font-style:normal;letter-spacing:0.5px;}
@font-face{font-family:'thaisans_neuebold';src:url('font/thaisansneue-bold-webfont.eot');src:url('font/thaisansneue-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('font/thaisansneue-bold-webfont.woff2') format('woff2'),
url('font/thaisansneue-bold-webfont.woff') format('woff'),
url('font/thaisansneue-bold-webfont.ttf') format('truetype'),
url('font/thaisansneue-bold-webfont.svg#thaisans_neuebold') format('svg');font-weight:normal;font-style:normal;letter-spacing:0.5px;}
body{background: url(../img/bg_web.jpg) #fff no-repeat top center;font-family:'thaisans_neueregular', Tahoma, Arial;font-size:21px;}
a{-webkit-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;}
a:hover{color:#FC6;text-decoration:none; outline:none;}
a:active{outline:none;}
.container h2, .row h2{font-family:'thaisans_neuebold';font-size:50px;}
.container p, .row p{font-family:'thaisans_neueregular';font-size:25px;letter-spacing:0px;line-height:30px;}


header{ background:url(../img/bg_web.png) #f3f3f3 no-repeat center; background-size:100% auto;color:black; z-index:9; position:relative;}
.navbar{height: 60vh; min-height:300px; padding-top:25px; position:relative;}
.p-tracking .navbar{height: 320px;}
.navbar-header{width: 100%; overflow:hidden;}
.navbar-brand{position:relative; width:100%; height:auto; z-index:999;}
.navbar-brand img{max-width:150px; }
.navbar-brand:after {
    content: "";
    position: absolute;
    bottom: 60px;
    left: 170px;
    border-bottom: 1px solid #000;    
    width: 100%;
}

.box-track{width:100%; position:relative; padding:50px 0;}

.tracking-header{font-family:'thaisans_neuebold'; font-size:33px; text-align:center; display:inline-block; width:100%;}

.tracking-input{font-family:'thaisans_neueregular'; font-size:21px; text-align:center;
display: block;
width: 100%;
max-width:600px; margin:15px auto;
height:55px; line-height:55px;
padding: .375rem .75rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 35px;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

.tracking-input::-webkit-input-placeholder,
.tracking-input:-ms-input-placeholder,
.tracking-input::placeholder { font-size:21px!important;}

.ke-btn-search {
  border-radius: 25px !important;
  border: none;
  padding: 7px 50px;
  cursor: pointer;
  height: 40px;
  background-color: #3a3937;
  color: #fff;
  font-family:'thaisans_neueregular';
  font-size:25px; line-height:25px; margin:auto;
  -webkit-appearance: none;
}
.submit-highlight-panel{text-align:center;}




.box{
    margin:0 10%;
    overflow: hidden;
    padding: 10px 0 40px 60px;
}

.box ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    transition: all 0.5s linear;
    top:0
}
.check-track{
	box-shadow: 0 2px 18px 0 rgba(0,0,0,.1);
	border-radius: 25px;
	margin-bottom:45px;
	padding:50px 0;
	margin-top:-70px; 
	z-index:999; 
	position:relative;
	background:#fff;
	
}
.description-track{
	font-family:'thaisans_neuebold';
	padding:0 15px;
	margin: 0 10%;
}

.box ul:last-of-type{top:-40px}

.box ul:before{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    /* border:1px dashed #272727; */
    position: absolute;
    top:0;
    left:30px
}

.box ul li{
    margin: 5px 60px 0px;
    position: relative;
    padding: 10px 20px;
    /*background:rgba(255, 255, 255, 0.3);*/
    color:#107896;
    border-radius: 10px;
    line-height: 20px;
    width: 100%;
	height: 50px;
	
}


.box ul li > span{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border:1px solid #e1e1e1;
    position: absolute;
    top:0;
    left:-30px
}

.box ul li:first-child > span{
	border:0;
}
.box ul li > span:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:#fff;
    border:2px solid #e1e1e1;
    position: absolute;
    left:-4.5px
}

.box ul li > span:before{top:-10px}
.box ul li > span:after{top:95%}

.box .title{
    font-weight: 500;
    margin-bottom: 0px;
	position: absolute;
	margin-top: 30px;
	margin-left: -20px;
}

.box .title .sub-title{ font-family:sans-serif;font-size:12px; font-weight:normal; color:#999; line-height:1;}


.box .info:first-letter{text-transform: capitalize;line-height: 1.7}

.box .name{
    margin-top: 10px;
    text-transform: capitalize;
    font-style: italic;
    text-align: right;
    margin-right: 20px
}


.box .time span{
    position: absolute;
    left: -100px;
    color:#3c6478;
    font-size:80%;
    font-weight: normal;
	margin-top: -5px;
}
.box .time span:first-child{top:-16px}
.box .time span:last-child{top:94%}


.arrow{
    position: absolute;
    top: 105%;
    left: 22%;
    cursor: pointer;
  height:20px;
  width:20px
}

.arrow:hover{
    -webkit-animation: arrow 1s linear infinite;
       -moz-animation: arrow 1s linear infinite;
         -o-animation: arrow 1s linear infinite;
            animation: arrow 1s linear infinite;
}

.box ul:last-of-type .arrow{
    position: absolute;
    top: 105%;
    left: 22%;
    transform: rotateX(180deg);
    cursor: pointer;
}

svg{
    width: 20px;
    height: 20px
}

.title-pickup, .wait-text{ color:#F9CA14;}
.title-notfound{text-align:center; font-size:21px; line-height:1; width:100%;display: block; color:#d9d9d9;}
.title-notfound i{font-size:40px; margin-bottom:15px;}



.p-tracking .box-track{padding: 25px 0;}


@keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-webkit-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-moz-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-o-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}


@media (max-width:992px){
	.navbar{height: 400px; padding-top:0;}
	.check-track{width:90%;margin-left: auto;margin-right: auto;}
	.description-track,.box{margin: 0 15px;}
	.box .title{max-width: 250px;}	
}
@media (max-width:640px){
	header{background-size:auto 150%;}
	.p-tracking .navbar{height: auto; min-height:240px;}
	.p-tracking .tracking-header{font-size: 23px;}
	.p-tracking .box{padding-bottom:0;}
	.p-tracking .box-track{ padding:10px;}
	.p-tracking .check-track{padding:20px 0 0;}
	.p-tracking hr{ margin-top:0; margin-bottom:0;}

}