.navbar-tribecar {
	width: 104%;
}

#userloc {
	width: 60%;
	max-width: 300px;
	margin: 15px auto;
}
#userloc:focus {
	border-color: #0d7abf;
}
#weeklyDiv {
	color: #000 !important;
}
.info-mapbox{
	max-width:250px;
}
.info-mapheader{
	font-family: 'Ubuntu';
}
.info-mapcontent{
	font-size: 15px;
}
.homepage-banner{
	/* min-height:500px; */
          min-height: 387px;
}
.bg-tribeblue{
	background-color:#0d7abf;
}
.weekend-btn{
	background-color:#0d7abf;
	color:white;
	font-size:18px;
	padding:20px 10px;
	font-family:'Ubuntu';
	line-height:1.4em;
}
.weekend-btn:hover{
	background-color:white;
	color:#0d7abf;
}
.section-div{
	padding-bottom: 5em;
	padding-top: 1em;
}
.invert{
	background-color: #0d7abf;
	color: white;
}
.why-circle{
	background-color: #0d7abf;
	color:white;
	border:3px solid white;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	font-size: 40px;
	padding-top: 20px;
	margin:0 auto;
}
.why-circle:hover{
	border: 3px solid #0d7abf;
	color: #0d7abf;
	background-color: white;
}
.why-label{
	margin-top:13px;
	font-weight:bold;
	font-size:18px;
}
.why-paragraph{
	font-style:italic;
	font-size:14px;
}
.why-div{
	padding:15px 0;
}
.minilink{
	margin:15px 0 10px 0;
	color:white;
}
.msia{
	font-weight:bold;
	font-style:normal;
}
.searchbar{
	border-top-left-radius: 0px;
}
.chrome-62-buttonfix{
	border-radius: 0px !important;
}
.pickup-date-label,
.pickup-time-label, 
.pickup-location-label,
.pickup-duration-label, 
.pickup-category-label,
.packages-label
{
	font-weight:300;
	color: #fff;
}
.tabs button {
	background-color: rgba(0,0,0,0.7);
	border:transparent !important;
	color:white;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 9px 19px;
	transition: 0.3s;
}
.tabs {
	position: absolute;
	bottom: 99%;
	left: 0px;
	overflow: hidden;
	border: rgba(0,0,0,0.7);
	background-color: #f1f1f1;

}
.tabs button.active {
	background-color: #0d7abf;
}
@media (min-width: 992px){
	.override-992{
		width:12%;
	}
}
.big-text {
	color: #0d7abf;
	font-size: 4.5em;
}
#locationCount::after {
	content: '200';
	animation: runLocation 2s ease-in-out;
}
.small-text{
	margin-top: -12px;
	font-size: 1.4em;
	margin-left: -18px;
	color: #666;
}
#customerCount::after{
	content:'300';
	animation: runLocation 2s ease-in-out;
}
#carsCount::after{
	content: '500';
	animation: runLocation 2s ease-in-out;
}
#cupCount::after{
	content: '1000';
	animation: runLocation 2s ease-in-out;
}
/*Animation*/
@keyframes runLocation {
	0% {
		content: '\00a0 0';
	}
	2% {
		content: '\00a0 1';
	}
	4% {
		content: '\00a0 2';
	}
	6% {
		content: '\00a0 3';
	}
	8% {
		content: '\00a0 4';
	}
	10% {
		content: '\00a0 5';
	}
	12% {
		content: '\00a0 6';
	}
	14% {
		content: '\00a0 7';
	}
	16% {
		content: '\00a0 8';
	}
	18% {
		content: '\00a0 9';
	}
	20% {
		content: '5';
	}
	22% {
		content: '10';
	}
	24% {
		content: '15';
	}
	26% {
		content: '20';
	}
	28% {
		content: '25';
	}
	30% {
		content: '30';
	}
	32% {
		content: '35';
	}
	34% {
		content: '40';
	}
	36% {
		content: '45';
	}
	38% {
		content: '50';
	}
	40% {
		content: '55';
	}
	42% {
		content: '60';
	}
	44% {
		content: '65';
	}
	46% {
		content: '70';
	}
	48% {
		content: '75';
	}
	50% {
		content: '80';
	}
	52% {
		content: '85';
	}
	54% {
		content: '90';
	}
	56% {
		content: '95';
	}
	58% {
		content: '100';
	}
	60% {
		content: '105';
	}
	62% {
		content: '110';
	}
	64% {
		content: '115';
	}
	66% {
		content: '120';
	}
	68% {
		content: '125';
	}
	70% {
		content: '130';
	}
	72% {
		content: '135';
	}
	74% {
		content: '140';
	}
	76% {
		content: '145';
	}
	78% {
		content: '150';
	}
	80% {
		content: '155';
	}
	82% {
		content: '160';
	}
	84% {
		content: '165';
	}
	86% {
		content: '170';
	}
	88% {
		content: '175';
	}
	90% {
		content: '180';
	}
	92% {
		content: '185';
	}
	94% {
		content: '190';
	}
	96% {
		content: '195';
	}
	98% {
		content: '198';
	}
}

@keyframes rotatemagic {
	0% {
		opacity: 0;
		transform: rotate(20deg);
		top: -24px;
		left: -253px;
	}
	100% {
		transform: rotate(-50deg);
		top: -25px;
		left: -78px;
	}
}

@keyframes FadeIn {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}

	25% {
		opacity: 0.25;
		transform: translateY(-8px);
	}

	50% {
		opacity: 0.5;
		transform: translateY(-5px);
	}
	85% {
		opacity: 0.8;
		transform: translateY(-2px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.step-box-desc {
	text-align: left;
}
.card-holder{
	border: 1px solid;
	margin-left: 10px;
	padding: 20px;
	margin-bottom: 10px;
}
.card {
	width: 100%;
	min-height: 100px;
	padding: 20px;
	border-radius: 3px;
	background-color: white;
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
}
.firstinfo {
	flex-direction: row;
	z-index: 2;
	position: relative;
	display: flex;
	align-items: center;
	transition: all 0.3s ease-in-out;
}
.firstinfo i {
	border-radius: 50%;
	border: 1px solid #d2d2d2;
	font-size: 44px;
	padding: 24px;
	background-color: white;
	color: #0d7abf;
	margin-right: 54px;
}
.firstinfo .workinfo {
	padding: 0px 20px;
}
.firstinfo .profileinfo {
	padding: 0px 20px;
}
.firstinfo .profileinfo h1 {
	font-size: 1.8em;
	margin-top: 0px;
}
.firstinfo .profileinfo h3 {
	font-size: 1.2em;
	color: #009688;
	font-style: italic;
}
.firstinfo .profileinfo p.bio {
	padding: 10px 0px;
	color: #5A5A5A;
	line-height: 1.2;
	font-style: initial;
}
.firstinfo i:hover{
	background-color: #0d7abf;
	color: white;
	border-color: white;
	transition: all 0.3s ease-in-out;
}
.card:after {
	content: '';
	display: block;
	width: 178px;
	height: 300px;
	background: #0d7abf;
	position: absolute;
	animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}

@media screen and (max-width: 991px){
	.embed-responsive-16by9 {
		padding-bottom: 56.25% !important;
		margin-top: 0% !important;
		margin-bottom: 20px;
	}
	.card{
		width:100%;
	}
	.mobile-height{
		min-height: 624px;
	}

}

@media screen and (min-width: 991px){
	.hidden-md-up{
		display: none;
	}
}

@media screen and (max-width: 425px){
	.card:after{
		width: 140px;
		height: 205%;
	}
	.firstinfo i {
		font-size: 24px;
	}
	.firstinfo .profileinfo h1 {
		font-size:1.2em;
	}
	.firstinfo .profileinfo p.bio {
		font-size:0.8em;
	}
}

@media screen and (max-width: 760px){
	.section-div{
		padding-bottom: 1em;
		margin-top: 1em !important;
		padding-top: 1em !important;
	}

}

@media screen and (max-width: 768px){

          .covid-19-container {
              display: none;
          }

	.works-header{
		margin-bottom:0px !important;
	}
}

.adjust-font{
	font-size: 28px;
	font-weight: 300;
}

.booking-notification {
	height: 100%;
	border: 1px solid rgba(128, 128, 128, 0.38);
	padding: 15px;
	margin-bottom: 7px;
}

.booking-name, .booking-location {
	color: #177fc1;
	font-size: 12px;
}

.booking-notification-container {
	min-height: 412px;
	max-height: 412px;
	overflow-y: hidden;
	border: 1px solid rgba(128, 128, 128, 0.21);
	padding: 10px;
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.animation-fadeIn {
	animation: FadeIn 1s linear;
	animation-fill-mode: both;
}
.bootstrap-select>.dropdown-toggle {
	padding-right: 12px;
}
.booking-notification-container>div>p>img {
	width: 7%;
	margin-right: 5px;
	border-radius: 65%;
}
span#select2-location-container {
	padding-left: 0px;
}

/** Dont port over to frontend.css **/
.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover{
	background-color: #fff;
	color: #444;

}
/** Custom Loading for Popular Location , only apply on home **/
#loadingDiv {
	text-align: center;
	font-size: 35px;
	margin-top: 46%;
}

/* Pop up Start */
#backdrop {
    position: fixed;
    background-color: #000000;
    width: 100%;
    height: 100%;
    z-index: 99;
    top: 0;
    opacity: 0.5;
    transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;

}

#popup {
    width: 100%;
    position: fixed;
    z-index: 999;
    opacity: 0;
}

.popupShow{
    opacity:1 !important;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.popupHide{
    opacity:0 !important;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    transform: translateY(-2000px);
}

.model-head{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(128, 128, 128, 0.62);
    margin-bottom: 13px;
}

.model-body {
    padding: 20px;
    border-radius: 6px;
    overflow-x: hidden;
    width: 31%;
    margin: 7px auto;
    overflow-y: hidden;
    max-height: 92vh;
}

.model-head>h2 {
    margin-top: 0px;
}

.close-model {
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    z-index: 9999;
    right: 34%;
    top: 2%;
    padding: 9px;
    text-align: center;
    width: 40px;
    height: 40px;
    border-radius: 35px;
    background-color: white;
    border: 1px solid black;
    color: gray;
}

#newDriverDiv {
    margin-bottom: 10px;
    background-color: white;
    padding: 6px;
	margin-right: 5px;
}

#phvDiv {
    margin-bottom: 10px;
    background-color: white;
    padding: 6px;
}

#phvCarType {
    margin-left: 10px;
    background-color: white;
    padding: 6px;
	width: 7rem;
}

#questionMark{
    font-size:15px;
}

#newDriverDescription {
    position: inherit;
    background-color: #0d7abf;
    width: 118%;
    padding: 4px;
    color: white;
    left: 5px;
    font-weight: 500;
    font-size: 11px;
    bottom: 38px;
}

.addAfter:after{
    position: absolute;
    top: -9px;
    left: 122%;
    margin-left: -50px;
    content: '';
    width: 0;
    height: 0;
    border-top: solid 15px #0d7abf;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
}

@media screen and (max-width: 768px){
    .close-model{
        right: 3%;
        top: 1.5%;
    }
    .model-body{
        width: 90%;
        margin-left: 8%;
    }
}
/*Pop up End */
  
.promo-banner {
	background-color: #0d7abf;
	color: white;
	padding: 5px;
	margin-bottom: 10px;
}
.promo-banner h2 {
	font-size: 1.5em;
	font-weight: bold;
}
.promo-banner p {
	font-size: 1.2em;
}
.promo-banner-btn-col {
	padding-top: 35px;
}

.promo-banner-img-col img {
	margin: 0 auto;
}
      
@media screen and (max-width: 768px){			
	.promo-banner h2 {
     	font-size: 1.0em;
     	font-weight: bold;
		margin: 0 0 5px 0;
     }
     .promo-banner p {
     	font-size: 0.8rem;
     }
     .promo-banner-img-col {
     	padding-top: 5px
     }
     .promo-banner-btn-col {
		padding-top: 5px;
	 }
}