/*
Theme Name: United Sedans
Theme URI: https://qupworld.com/wordpress/themes/united-sedans/
Author: the QUp World team
Author URI: https://qupworld.com/
Description: 
Version: 1.0
Text Domain: UnitedSedans
*/

.vcenter {
	display: inline-block;
	vertical-align: middle;
	float: none;
}

#fake-header {
	height: 40px;
	background-color: #E8E8E8;
}

#header {
	height: 40px;
	width: 100%;
	background: #E8E8E8 url(img/header.bg.png) 0 0 repeat-x;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}
#header.admin {
	top: 31px;
}

#logo {
	display: inline-block;
	margin: 4px auto;
}

#logo img {
	max-height: 32px;
}

#menu-toggle {
	color: #333;
	float: left;
	display: inline-block;
	cursor: pointer;
	font-size: 22pt;
	margin: 5px 0 0px 5px;
}

#menu-toggle:hover {
	color: #bb0017
}

#hotline, #hotline + a {
	float: right;
	color: #A51709;
	text-decoration: none;
	margin-top: 9px;
	margin-right: 8px;
	font-weight: bold;
	font-size: 15px
}


/******************************************* Menu **************************************************************/

#menu {
	height: 100%;
	width: 270px;
	background-color: #BE0127;
	position: fixed;
	top: 0;
	left: -300px;
	z-index: 10002;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
#menu.opened {
	left: 0;
	z-index: 10002;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}

#menu-modal {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10001;
	cursor: pointer;
}


#menu.admin {
	top: 31px;
}

#close-menu {
	color: #fff;
	float: left;
	display: inline-block;
	cursor: pointer;
	font-size: 22pt;
	margin: 5px 0 0px 5px;
}

#menu > ul {
	display: inline-block;
	width: 250px;
	margin: 30px 20px;
	padding: 0;
}




#menu li {
	padding: 5px 0;
	list-style: none;
	border-top: #D24D68 solid 1px;
}


#menu > ul > li:first-child {
	border-top: none;
}

#menu li:last-child {
	border-bottom: #D24D68 solid 1px;
}

#menu li a {
	color: #CACAC8;
	text-decoration: none;
	line-height: 32px;
	display: inline-block;
	width: 100%;
}

#menu li a:before {
	display: inline-block;
	width: 32px; height: 32px;
	float: left;
	content: " ";
	margin-right: 20px;
}

#menu li a.child:before {
	width: 16px;
	margin-right: 10px;
}

#menu li.has-child {
	border-bottom: 0;
	cursor: pointer;
}

#menu li.has-child.expanded {
	padding-bottom: 0;
}

#menu li.has-child ul {
	display: none
}

#menu li.has-child.expanded ul {
	display: inherit;
	list-style: none
}

#menu li.has-child li {
	padding-left: 40px;
}

#menu li.has-child li:last-child {
	border-bottom: 0;
}

#menu > ul li > ul{
	padding: 0; margin: 10px 0 0 0;
}

#menu li a.home:before { background: url(img/home.png) center center no-repeat }
#menu li a.fare:before { background: url(img/fare.png) center center no-repeat }
#menu li a.contact:before { background: url(img/contact.png) center center no-repeat }
#menu li a.download:before { background: url(img/down.png) center center no-repeat }
#menu li a.reserve:before { background: url(img/reserve.png) center center no-repeat }
#menu li a.legal:before { background: url(img/legal.png) center center no-repeat }
#menu li a.driver:before { background: url(img/driver.png) center center no-repeat }
#menu li a.child:before { background: url(img/more.png) center center no-repeat }
#menu li a.support:before { background: url(img/support.png) center center no-repeat }

#menu ul > li:hover {
	background-color:#D24D68
}

#menu li.has-child.expanded:hover {
	background-color: transparent;
}

#menu ul > li:hover > a {
	color: #fff
}
#menu ul > li:hover > a.home:before { background: url(img/home-active.png) center center no-repeat }
#menu ul > li:hover > a.fare:before { background: url(img/fare-active.png) center center no-repeat }
#menu ul > li:hover > a.contact:before { background: url(img/contact-active.png) center center no-repeat }
#menu ul > li:hover > a.download:before { background: url(img/down-active.png) center center no-repeat }
#menu ul > li:hover > a.reserve:before { background: url(img/reserve-active.png) center center no-repeat }
#menu ul > li:hover > a.legal:before { background: url(img/legal-active.png) center center no-repeat }
#menu ul > li:hover > a.driver:before { background: url(img/driver-active.png) center center no-repeat }
#menu ul > li:hover > a.child:before { background: url(img/more-active.png) center center no-repeat }
#menu ul > li:hover > a.support:before { background: url(img/support-active.png) center center no-repeat }

/******************************************* BANNER **************************************************************/
.carousel-indicators li {
	margin: 0 3px;
	width: 7px;
	height: 7px;
	background-color: white;
}

.carousel-indicators li.active {
	margin: 0 3px;
	background-color: #be0026;
	border: #be0026;
	width: 7px;
	height: 7px;
}
.bt-bn {
	margin: 20px 0 50px 0;
}

.img-bnip {
	width:  100%;

}

.button-bn {
	width: 35%;
	margin: 0 10px;
}

#br {
	display: none;
}

.banner-left {
	bottom: 10%;
	font-size: 20px;
}

.banner-right {
	bottom: 10%;
	font-size: 20px;
}

.banner-right2 {
	bottom: 10%;
	font-size: 20px;
}

.img-bndt {
    display: none !important;
}
/******************************************** FOOTER *************************************************************/
#footer a {
	text-decoration:none;
}
#footer-top {
	text-align: center;
	background-color: #be0026;
	padding: 0 0 30px 0;
}

#footer-top span {
	display: block;
	font-size: 20px;
	color: white;
	margin: 35px 0px 10px 0;
	text-transform: uppercase;
}

#footer-top a {
	color: white;
	display: block;
	font-size: 20px;
	text-transform: capitalize;
}


#footer-bottom {
	background-color: #8a001a;
	font-size: 11px;
	text-align: center;
	color: white;
	height: 60px;
	line-height: 60px;
}
/******************************************** What ***************************************************************/
.what-top {
    text-align: center;
    padding: 30px 0;
}

.what-top h2 {
    font-weight: bold;
		font-size: 30px;
		color:#be0026;
}

.what-top span {
    display: block;
    font-size: 18px;
    text-align: center;
}

.what-left {
    text-align: center;
    padding: 20px 10px 60px 10px;
}
.what-left > img {
    width: 200px;
}

.what-left p {
    text-align: justify;
    margin: 20px 0 0 0;
    font-size: 18px;
}

.what-left h3 {
    text-transform: capitalize;
    font-weight: bold;
    margin: 10px 0 20px 0;
}

.what-right {
    text-align: center;
    padding: 20px 10px 60px 10px;
}

.what-right > img {
    width: 200px;
}

.img-what-right {
	width: 90%;
	max-width: 349px;
}

.what-right p {
    text-align: justify;
    margin: 20px 0 0 0;
    font-size: 18px;
}

.what-right h3 {
    text-transform: capitalize;
    font-weight: bold;
    margin: 10px 0 20px 0;
}

.what-button {
    width: 45%;
    max-width: 160px;
    margin: 0 5px 0 5px;
}

.what-content {
    margin: 0 0 20px 0 ;
}
/******************************************** Service Area ***************************************************************/
#service-areas {
	padding-top: 30px;
	background: url(img/service.bg.mobile.jpg) center center no-repeat;
	background-size: 100% 100%;
	text-align: center;
}

#service-areas h2 {
	margin-bottom: 20px;
	color: #fff;
}

#service-areas .item {
	margin-bottom: 20px;
}

#service-areas .item img {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: #fff solid 5px;
	max-width: 100%;
}

#service-areas .item div {
	color: #fff;
	font-size: 16pt;
	margin: 5px 0 15px 0;
}

#service-areas .item.comming-soon img {
	border: #aaa solid 5px;
}

#service-areas .item.comming-soon div {
	color: #938980;
}
/******************************************** Contact Home ***************************************************************/
#contact {
	text-align: center;
	color: #fff;
	padding: 50px 20px;
	background-image: url(img/contact.bg.mobile.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

#contact .icons {
	margin: 40px 0 20px 0;
}

#contact .icons a span {
	display: none
}

#contact .icons a {
	display: inline-block;
	width: 46px; height: 45px;
	background-image: url(img/contact.icon.png);
	background-repeat: no-repeat;
	margin: 0 8px;
}

#contact .icons .twitter { background-position: -69px 0;}
#contact .icons .gplus { background-position: -138px 0;}
#contact .icons .email { background-position: -206px 0;}
/******************************************** Fare ***************************************************************/
#fare {
	background: #fff;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

#fare .cities {
	text-align: center;
	margin: 40px 0 10px 0;
}

#fare .cities span {
	padding: 10px 80px;
	margin: 0 auto;
	background-color: #BE0026;
	color: #fff;
}

#fare .fare-img img {
	width: 100%
}

#fare .data {
	display: none;
}

#fare .data table {
	width: 100%;
}

#fare .data table td {
	padding: 8px 0;
}

#fare .data table td {
	border-bottom: #7F7F7F solid 1px;
}

#fare .data table tr:last-child td {
	border-bottom: 0;
}

#fare .crc {
	text-align: right;
}

#fare .val {
	text-align: left;
}

#fare .fare-data .txt {
	font-weight: bold;
}

#car-type-select {
	padding: 5px;
	width: 80%;
	margin-bottom: 20px;
	border: #ED1B23 solid 1px;
	outline: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#fare .car-type-switch {
	display: inline-block;
	margin: 20px auto 10px 0;
	width: 250px;
	height: 62px;
	background: url(/wp-content/uploads/2015/09/fare.car_.type_.bg_.4.png) center center no-repeat;
	position: relative;
}
#fare .car-type-switch span.display {
	display: inline-block;
	width: 62px; height: 62px;
	background-image: url(img/fare.icons.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
#fare .car-type-switch-text {
	font-weight: bold;
	color: #A3A3A3;
	display: inline-block;
	width: 280px; height: 30px;
	position: relative;
	margin-bottom: 30px;
}
#fare .car-type-switch-text .active {
	color: #A7170E;
}
#fare .car-type-switch-text span {
	position: absolute;
	cursor: pointer;
}
#fare .car-type-switch-text span.sedan { left: 5px }
#fare .car-type-switch-text span.suv { left: 88px }
#fare .car-type-switch-text span.sedan-e { left: 150px }
#fare .car-type-switch-text span.suv-e { left: 230px }

#fare .car-type-switch .anchor {
	display: inline-block;
	width: 25px; height: 62px;
	position: absolute;
	cursor:pointer;
}
#fare .car-type-switch .anchor.sedan { left: -2px }
#fare .car-type-switch .anchor.suv { left: 75px }
#fare .car-type-switch .anchor.sedan-e { left: 150px }
#fare .car-type-switch .anchor.suv-e { left: 225px }
/******************************************** Page Content ***************************************************************/
.page-content {
	background-color: #fff;
}
.page-content .page-banner {
	width: 100%;
}

.page-content .page-title {
	text-align: center;
	color: #fff;
	font-weight: bold;
	margin-top: -108px;
	margin-bottom: 10px;
	text-transform: uppercase
}

.page-content .page-title a span {
	display: none
}

.page-content .page-title a.support:before {
	display: inline-block;
	width: 70px; height: 70px;
	content: " ";
	background: url(img/page.icon.support.png) center center no-repeat;
	margin-bottom: 5px;
}

.page-content .page-title a.legal:before {
	display: inline-block;
	width: 70px; height: 70px;
	content: " ";
	background: url(img/page.icon.legal.png) center center no-repeat;
	margin-bottom: 5px;
}

.page-content .page-title a.contact:before {
	display: inline-block;
	width: 70px; height: 70px;
	content: " ";
	background: url(img/page.icon.contact.png) center center no-repeat;
	margin-bottom: 5px;
}


.page-content h1 {
	color: #C10326;
	font-size: 20pt;
	text-align: center;
}

.page-content .faqs-h3 h2 {
	color: #C10326;
	font-size: 20pt;
	text-align: center;
	font-weight: normal !important;
	border-top: #B2B2B2 solid 1px;
	padding: 30px 0;
	margin-top: 80px;
}

.page-content .faqs-h3 h2:first-child {
	border-top: 0;
	margin-top: 0;
}

.page-content h3.faq {
	font-size: 12pt;
	cursor: pointer;
}

.page-content .faq-content {
	margin: 10px 0 0 40px;
}

.page-content h3.faq:before {
	font-family: FontAwesome;
	content: '\f068';
	margin-right: 10px;
	cursor: pointer;
}
.page-content h3.faq.state-hide:before {
	font-family: FontAwesome;
	content: '\f067';
	margin-right: 10px
	cursor: pointer;
}

.page-content .h2-number {
	line-height: 40px;
	font-size: 13pt;
	text-decoration: uppercase;
	margin-top: 50px;
}

.page-content .h2-number span {
	display: inline-block;
	width: 40px; height: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	margin-right: 15px;
	background-color: #C10326;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
#support-more {
	padding: 30px 0;
	border: #C7C6CB solid 1px;
	background-color: #F3F3F3;
	margin-top: 40px;
}
#support-more a {
	color: #ED1B24;
	text-decoration: none;
}
/******************************************* CONTACT FORM **************************************************************/
#contact-form .form-group {
	display: inline-block;
	width: 100%;
	margin: 10px 0;
}

#contact-form .form-group label {
	font-weight: normal;
}


#contact-form #captchac {
	width: 25%;
}

#contact-form #captchar {
	width: 70%;
	float: right
}

#contact-form .form-group input, #contact-form .form-group textarea {
	width: 100%;
	background-color: transparent;
	border: #ED1B24 solid 1px;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	outline: none
}

#contact-form input[type="submit"] {
	width: auto;
	padding: 7px 30px;
	background-color: #ED1B24;
	color: #fff;
	float: right;
}

#contact-form h2 {
	font-size: 26px;
	color: #ED1B24;
	margin-bottom: 15px;
}
#contact-form .contact-wrapper h2 {
	padding-left: 15px;
}

#contact-form .contact-info h2 {
	margin-bottom: 22px;
}

#contact-form .contact-info {
	margin: 15px
}

#contact-form .contact-info .item {
	display: inline-block;
	width: 100%;
	margin-bottom: 20px;
}

#contact-form .contact-info .item span {
	display: inline-block;
	background-color: #ED1B24;
	color: #fff;
	font-weight: bold;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	float: left;
	width: 8%;
	max-width: 20px;
	text-align: center;
	font-size: 13px;
	line-height: 20px;
}

#contact-form .contact-info a {
	color: #333;
	text-decoration: none;
}

#contact-form .contact-info .item label {
	display: inline-block;
	float: right;
	width: 90%;
	font-weight: normal;
	line-height: 23px;
}

#contact-form .contact-wrapper {
	margin: 0 auto 30px auto;
}

#contact-form .desc {
	padding: 0 15px;
}

#contact-success-popup-modal {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.8;
	z-index: 9999;
}

#contact-success-popup {
	position: fixed;
	top: -1000px; left: 1000px;
	z-index: 10000;
	width: 500px;
}

#contact-success-popup .contact-popup {
	text-align: center;
	background-color: #fff;
}

#contact-success-popup .contact-msg-title {
	color: #ED1B24;
	padding: 20px;
	border-bottom: #ED1B24 solid 1px;
}

#contact-success-popup .contact-msg-content {
	padding: 30px 20px 10px 20px;  
}

#contact-success-popup .contact-msg-button {
	display: inline-block;
	width: 100%;
	padding: 20px;
}
#contact-success-popup .contact-msg-button a {
	padding: 10px 50px;
	background-color: #ED1B24;
	color: #fff;
	text-decoration: none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.wpcf7-mail-sent-ok {
	display: none !important;
}

span.wpcf7-not-valid-tip {
	display: inline-block;
	margin-top: 5px;
}

div.wpcf7-mail-sent-ok {
	width: 100%;
	background-color: #399935;
	border-color: #399935;
	margin: 0 auto;
	color: #fff
}

div.wpcf7-validation-errors {
	width: 100%;
	background-color: #a00;
	border-color: #a00;
	margin: 0 auto;
	color: #fff
}

@media (min-width:400px){
	.banner-left {
		bottom: 25%;
		font-size: 26px;
	}

	.banner-right {
		bottom: 25%;
		font-size: 26px;
	}

	.button-bn {
		width: 110px;
	}

	.banner-right2 {
		bottom: 25%;
		font-size: 26px;
	}
}

@media (min-width: 768px) {
	#fake-header {
		height: 80px;
	}

	#header {
		height: 80px;
	}
	
	#logo {
		margin: 5px auto;
		margin: 10px auto;
	}
	
	#logo img {
		max-width: 252px;
		max-height: 60px;
	}

	#menu-toggle {
		font-size: 25pt;
		margin: 24px 0 20px 20px;
	}
	
	#close-menu {
		font-size: 25pt;
		margin: 24px 0 0 20px;
	}
	
	#hotline, #hotline  + a{
		display: inline-block;
		float: right;
		color: #A51709;
		font-size: 18pt;
		font-weight: bold;
		margin: 24px 20px 0 0;
		text-decoration: none;
	}
	/******************************************* Menu **************************************************************/

	#menu {
		width: 300px;
		}

	#menu > ul > li:first-child {
		border-top: #D24D68 solid 1px;
	}
	
	#menu > ul {
	width: 260px;
	}

	/******************************************* BANNER **************************************************************/
	.img-bnip {
			display: none !important;
	}
	
	.img-bndt {
			display: inherit !important;
			width: 100%;
	}
	
	#br {
		display: inherit;
	}
	
	.button-bn {
		width: 95px;
		margin-left: 0px;
	}
	
	.banner-right {
		left: 55%;
    right: auto;
    top: 36%;
    text-align: left;
    font-size: 20px;
	}
	
	.banner-left {
		text-align: left;
    left: auto;
    right: 50%;
    font-size: 20px;
    top: 35%;
	}
/**************************************** FOOTER *********************************************************/
	#footer-top {
		text-align: left;
	}

	#footer-top span{
		font-size: 15px;
	}
	
	#footer-top a {
		font-size: 14px;
	}
	
	#footer-bottom {
		font-size: 14px;
	}
	
	.company{
		display: inline !important;
	}
	
	#border-company {
		border-right : 2px solid white;
		padding-right: 10px;
		margin-right: 10px;
	}
	/******************************************** What ***************************************************************/
	.what-left {
    text-align: center;
    padding: 20px 20px 60px 20px;
	}
	
	.what-right {
    text-align: center;
    padding: 20px 20px 60px 20px;
	}
	
	.what-content {
    height: 425px;
  }
	/******************************************** Contact Home ***************************************************************/
	#contact {
		min-height: 400px;
		padding-top: 85px;
		background-image: url(img/contact.bg.jpg);
	}
	
	#contact h2 {
		font-size: 30pt;
	}
	
	#contact .desc {
		font-size: 16px;
	}
	
	#contact .icons {
	}
	/******************************************** Service Area ***************************************************************/
	#service-areas {
		padding: 80px 0 100px 0;
		background: url(img/service.bg.desktop.jpg) center center no-repeat;
		background-size: 100% 100%;
		text-align: center;
	}
	
	#service-areas h2 {
		margin-bottom: 80px;
	}
	
	#service-areas .item div {
		margin: 15px 0
	}
	/******************************************** Page Content ***************************************************************/
	.page-content .page-title {
		margin-top: -190px;
		margin-bottom: 100px;
		font-size: 17pt;
	}
	/******************************************** Contact Form ***************************************************************/
	#contact-form .contact-info {
		margin: 30px 0
	}
	
	#contact-form .contact-wrapper {
		margin: 30px auto;
	}
}


@media (min-width:992px){
	/**************************************** BANNER *********************************************************/
	.button-bn {
			width: 120px;
	}
				
	.banner-right {
    font-size: 26px;
	}
	
	.banner-left {
    font-size: 26px;
	}
	/******************************************** What ***************************************************************/
	.what-top span {
		font-size: 20px;
	}
	.what-left {
    text-align: center;
    padding: 20px 30px 60px 30px;
	}
	
	.what-right {
    text-align: center;
    padding: 20px 30px 60px 30px;
	}
	
	.what-content {
    height: 430px;
  }
	
	.what-content p {
		font-size: 20px;
	}
	/******************************************** Contact Home ***************************************************************/
	/******************************************** Page Content ***************************************************************/
	.page-content .page-title {
		margin-top: -255px;
		margin-bottom: 160px;
		font-size: 17pt;
	}
}

@media (min-width:1200px){
	.button-bn {
		width: 160px ;
	}

	.banner-left {
		font-size: 34px;
	}

	.banner-right {
		font-size: 34px;
	}

	.banner-right2 {
		font-size: 34px;
	}
	/******************************************** Contact Home ***************************************************************/
	#contact {
		min-height: 550px;
		padding-top: 160px;
	}
	/******************************************** Page Content ***************************************************************/
	.page-content .page-title {
		margin-top: -280px;
		margin-bottom: 170px;
		font-size: 17pt;
	}
}