@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
body {background:#fff;}
a {color:#5F5F5F;}
a:hover, a:visited, a:focus {text-decoration:none; outline: none; border: none;}
.clientUI {font-family: 'Roboto', sans-serif; padding-top: 65px; padding-bottom: 30px; position: relative;}
.colorRed {color:#DB2827;}
.orangeColor {color:#EF6833;}
.orangeColor-bg {background-color: #EF6833;}
.bluColor {color:#33C9EF;}
.f16 {font-size:16px;}
.f20 {font-size:20px;}
.pd {padding:0px !important;}
.w250 {width:250px;}
.marT20 {margin-top:20px;}
.smallTitle {letter-spacing:0.2em; color: #DB2827;}
.marT50 {margin-top:50px;}
.clear {clear:both;}
.hide {display:none;}
.img200 img {width:200px !important;}
.img100 img {width:100%;}
.fixedBtn {position:absolute; bottom: 20px; left: 50px;}
.marginB {margin-bottom:40px;}
.bodyText {font-size:17px; color: #5F5F5F; font-weight: 300; margin-top: 20px;}
.clientUI .col-lg-6 {padding:0px;}
.designBox {background:#fff; padding: 20px; margin: 15px 0; border: solid 1px #e1e1e1; position: relative; border-radius: 20px 20px 0px 20px;}
.designBox:hover {box-shadow: 0px 0px 10px rgba(0,0,0,0.2)}
.highlight {background:#DB2827; color: #fff;}
.designBox p {margin:0px;}
.designBox h2 {font-size:24px;}
.clientUI h3 {font-size:20px;}
.designBox h2, .designBox h3 {margin:0px 0 10px 0; font-weight: 500;}
.welcomeNote {min-height:454px; border: none !important; padding:15px 0 0 20px;}
.welcomeNote .bodyText {font-weight: 400 !important; line-height: 1.5em; color: #000;}
.featureIcon {color:#DB2827; font-size:20px; text-shadow: 2px 3px 5px rgba(219,40,40,0.2)}
.features {font-size:24px; color: #000; font-weight: 500;}
.bigFonts {font-size:100px; margin: 0px;}
.counts {font-size:18px; font-weight: 300; color:#6E6E6E;}
.pushLeft {margin-left:30px;}
.listLink {margin:20px 0 25px 0; padding: 0px; list-style: none;}
.listLink a {font-size: 18px; color: #6E6E6E;}
.fixedHeight {min-height:210px;}
.greenBtn {background:#0BE074; color: #fff; padding: 8px 20px; font-size: 15px; font-weight: 500; border-radius: 30px; display: inline-block; box-shadow: 2px 3px 5px rgba(11,224,116,0.5)}
.greenColor {color:#0BE074;}
.greenBtn:hover, .redBtn:hover {text-decoration:none; color: #fff; transform: scale(1.1);}
.redBtn {background:#EF3352; color: #fff; padding: 8px 20px; font-size: 15px; font-weight: 500; border-radius: 30px; display: inline-block; box-shadow: 2px 3px 5px rgba(240,51,82,0.5)}
.documentBg {background: url(pages/images/document.jpg) left top no-repeat; background-size: cover; border: none; color: #fff;}
.documentBg .featureIcon, .documentBg .features {color:#fff;}
.myCity {background:#33C9EF; padding: 15px; display: block; text-align: center; box-shadow: 0px 5px 5px rgba(51,201,239,0.3); border-radius: 20px 20px 0px 20px;}
.myCity img {width:90px;}
.myCity img:hover {transform:scale(1.1)}
.notification {background:#FFD800; width: 40px; height: 40px; padding: 10px; color: #fff; border-radius: 20px; text-align: center; font-size: 16px; position: absolute; top: -10px; right: -10px;}
.editTct {background:#33C9EF; width: 44px; height: 44px; padding: 5px; color: #fff; border-radius: 22px; text-align: center; font-size: 16px; position: absolute; top: 8px; right: 8px; box-shadow: 0px 5px 5px rgba(51,201,239,0.3)}
.editTct:hover {transform:scale(1.1)}

/* Cool Gredients */

.dustyGlass{background-image: linear-gradient(120deg, #33c9ef 0%, #1eb3d9 100%);}
.sunnyMor {background-image: linear-gradient(120deg, #0be074 0%, #0cc768 100%);}
.winterNeva {background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);}
.rainyAshvill {background-image: linear-gradient(120deg, #a6c1ee 0%, #fbc2eb 100%);}
.meanFruit {background-image: linear-gradient(120deg, #d57eeb 0%, #fccb90 100%);}
.temtingAzur {background-image: linear-gradient(120deg, #8fd3f4 0%, #84fab0 100%);}
.healthyWater {background-image: linear-gradient(60deg, #50c9c3 0%, #96deda 100%);}
.heavyRain {background-image: linear-gradient(120deg, #cfd9df 0%, #e2ebf0 100%);}

.navbar-top-links {position:absolute; top: 0px; right: 50px;}
.navbar-header {padding-top:0px; padding-bottom:10px;}
.sidebar  {margin-top:0px;}
.navbar-top-links li a {min-height:60px; padding-top: 20px;}
.dropdown .fa {color:#DB2827;}
.sidebar ul li a {color:#5F5F5F; font-size: 16px; padding-top:15px; padding-bottom:15px; }
.sidebar ul li a:hover {background:#fff;}
.sidebar ul li a .fa {font-size:18px;}
.sidebar ul li a.active {color:#fff; background-color: #DB2827; box-shadow: 0px 2px 3px rgba(220,40,40,0.3);}
.carousel {background:#DB2827; padding: 15px 0; box-shadow: 0px 5px 5px rgba(219,40,39,0.3); height: 120px; border-radius: 20px 20px 0px 20px; }
.carousel a {color:#fff; font-size: 16px;}
.carousel img {width:60%;}
.srviceText {padding-top:20px;}
.responsive {}
.slick-prev:before, .slick-next:before {font-size:30px;}
.slick-prev {left:10px; z-index: 99;}
.slick-next {right:15px;}
.slick-list {padding:0 30px;}
.footer {margin:20px 0 0px 0; padding: 2px; text-align: right; font-size: 12px; background: rgba(255,255,255,0.3); color: #ccc; position: fixed; bottom: 0px; right: 10px;}

.tab-content {box-shadow: 0px 0px 7px rgba(0,0,0,0.1)}
.nav-tabs {border-bottom:none;}
.nav-tabs li a {font-size: 14px; padding:10px 10px;}
.nav-tabs li a:hover {color:#000;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {font-weight: 600; color: #db2827;}
.tab-pane {background:#fff; border:solid 1px #dedede; border-collapse: collapse;}
.tab-pane .table {margin-bottom:0px;}
.panel-default thead {font-weight: bold;}
.tableHead, tr, th {padding-top:15px !important; padding-bottom:15px !important; border: 0px;}
.formFilde {padding:20px 0;}
.formFilde .inputType {width:100%; border:solid 1px #dddddd; padding:6px 8px; border-radius: 3px; font-size: 16px;}
.formFilde .inputType:focus {outline:none; border:solid 1px #db2827; box-shadow: 0px 0px 5px rgba(220,40,40,0.3);}
.formFilde p {color:#5f5f5f; margin: 8px 0 5px 0;}
.formFilde h3 {margin:0px 0 10px 0;}
.formFilde hr {border-top:solid 1px #dedede; height: 1px; display: block;}
.calendar {background-image:url(pages/images/calendar.svg); background-repeat: no-repeat; background-position: 97% center; background-size: 16px;}
.calendar:focus {background-image:url(pages/images/calendarRed.svg);}
.buttonYello {background:#ffba00; color: #fff; padding:10px 20px; border: none; font-weight: 700; font-size: 16px; border-radius: 5px; margin-right: 15px;}
.buttonGreen {background:#18d533; color: #fff; padding:10px 20px; border: none; font-weight: 700; font-size: 16px; border-radius: 5px;}
.buttonRed {background:#db2827; color: #fff; padding:10px 20px; border: none; font-weight: 700; font-size: 16px; border-radius: 5px;}
.buttonGreen:hover, .buttonYello:hover, .buttonRed:hover {background:#000; color: #fff;}

.myServices {margin: 10px 0 40px 0;}
.myServices .col-lg-3 {padding:0px;}
.mobilityManagment {background-image:url(pages/images/mobility.svg); background-position: right bottom; background-repeat: no-repeat; background-size: 120px; background-color: #fff; padding:20px 30px; margin:0 15px 15px 0; min-height: 150px; color: #333; box-shadow: 0px 0px 2px rgba(0,0,0,0.4);}
.immigration {background-image:url(pages/images/immigration-icon.svg);}
.fleet {background-image:url(pages/images/fleetmanagment.svg);}
.travel {background-image:url(pages/images/travelService.svg);}
.relo {background-image:url(pages/images/relocation.svg);}
.culture {background-image:url(pages/images/culture.svg);}
.corporatehousing {background-image:url(pages/images/corporatehousing.svg);}
.furniture {background-image:url(pages/images/furnitureRental.svg);}
.globalM {background-image:url(pages/images/globalMobility.svg);}
.mobilityManagment h4 {font-size:22px; font-weight: 600; }
.myServices {font-size:24px; padding: 15px;}
.myServices p {font-size: 14px; color: #8A8A8A}
.filesImg {max-height:200px; overflow: hidden; margin-bottom: 20px; position: relative;}
.filesImg img {width:100%;}
.imgAction {position:absolute; top: 10px; right: 20px; font-size: 20px;}
.imgAction a:focus {outline:none;}
.imgAction i {color: #fff;}

.completed {font-size:13px; font-weight: 600; background:#0be074; padding: 3px 5px; color: #fff; border-radius: 3px; text-transform: uppercase;}
.pendding {font-size:13px; font-weight: 600; background:#db2827; padding: 3px 5px; color: #fff; border-radius: 3px; text-transform: uppercase;}
.TableControls {position:relative; right: 0px; top: 0px; padding-top: 10px;}
.inlineblock {display:inline-block;}

.panel-default {width:100%; margin-top: 20px; overflow-x: scroll;}
.panel-default table {width:1000px;}

.modal img {width:100%;}
.newTicket {background-color:#f5f5f5; border:solid 1px #ccc; margin-top: 20px;}
.newTicket h3 {margin:20px 0 0 16px;}

.agentInfo {margin:20px 0 30px 0; background: #fff; border: solid 1px #e7e7e7; border-radius: 3px; padding: 10px 0 10px 0; box-shadow: 0px 0px 3px rgba(0,0,0,0.1);}
.agentInfo h4, .agentInfo p {margin:0;}
.agentInfo h4 {font-size:16px; margin-bottom: 5px;}
.agentInfo hr {height:1px; padding: 0px; margin:10px 0px;}

.aroundCity {margin:20px 0 50px 0;}
.aroundCity .col-md-2 {padding:0px 5px; overflow: hidden;}
.aroundCity img {height:60px; margin-bottom: 10px;}
.aroundCity h2 {margin-bottom: 20px;}
.aroundCity a {font-size:13px; background:#33c9ef; padding:15px; min-height: 130px; margin-bottom: 10px; text-transform: uppercase; font-weight: 500; display: block; text-align: center; color: #fff;}
.aroundCity a:hover {background:#db2827; box-shadow: 0px 3px 10px rgba(219,40,40,0.5);}
.aroundCity a:focus {outline:none;}
.redLine {margin:10px 0;}
.redLine img {width:auto;}
.closeBtn {position:absolute; top: 80px; right: 30px; z-index: 99;}
.closeBtn a img {width:30px;}
.festivals {margin:0px; padding: 0px 0 0 20px; font-size: 16px;}
.festivals li {margin:15px 0; color: #333;}
.cityList {margin:0px; padding: 0px 0 0 20px;}
.cityList li {font-size: 14px; margin: 7px 0;}
.guideBox {padding:10px 20px 18px 20px; border-radius: 5px; margin: 15px 0 0 0; min-height: 220px;}
.guideBox:hover {box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}
.guideBox h4 {font-size:24px; margin-bottom: 30px; color: #fff;}
.guideBox h4 img {height:40px; margin-right: 20px;}
.guideBox a {font-size:14px; font-weight: 400; color: #fff; padding:5px 10px; margin:0 3px 6px 0; border:dashed 1px #fff; display: inline-block; border-radius: 3px; text-transform: uppercase;}
.guideBox a:hover {background:#db2827; color: #fff;}
#f-Slide {height: 83vh; overflow:hidden; overflow-x: hidden; overflow-y: hidden;}
.f-SlidWrap {}
.f-Box {margin: 20px 10px 0 0; height:70vh; float: left;  display: inline-block; position: relative; border-radius: 20px 20px 0px 20px;}
.f-Box:hover {border-radius: 100px 100px 0px 100px; transition: 1s;  -webkit-transition: 1s;}
.smallFlexBox {height:49%; border-radius: 20px 20px 0px 20px; position: relative; transition: 1s;  -webkit-transition: 1s;}
.smallFlexBox:hover {border-radius: 100px 100px 0px 100px;}
.smallFlexBox .flexCont {position:absolute; top:10%; left:40px; z-index: 99;}
.f-Cont {position:absolute; top:8%; left:40px; z-index: 99;}
.f-Cont h3 {color:#fff; font-size: 44px; font-weight: 500;}
.f-Cont ul {list-style:none; margin: 20px 0 0 30px; padding: 0px;}
.f-Cont ul li {border-bottom: solid 1px rgba(255,255,255,0.2); padding-bottom: 5px;}
.f-Cont ul li:before {content: "";  border-color: transparent #fff;  border-style: solid;  border-width: 0.45em 0 0.45em 0.65em;  display: block;  height: 0;  width: 0;  left: -1.8em;  top:1.6em;  
    position: relative;} 
.f-Cont ul li a {font-size:22px; color: #fff; font-weight: 300;}
.f-Cont ul li a:hover {color: #000; font-weight: 600;}
.gradient_1 {background-image: linear-gradient(120deg, #F99A3B 0%, #E34600 100%);}
.gradient_2 {background-image: linear-gradient(120deg, #4FCF06 0%, #249E07 100%);}
.gradient_3 {background-image: linear-gradient(120deg, #3B7AF9 0%, #001685 100%);}
.gradient_4 {background-image: linear-gradient(120deg, #DB3BF9 0%, #8900E3 100%);}
.gradient_5 {background-image: linear-gradient(120deg, #3BBEF9 0%, #0081AA 100%);}
.gradient_6 {background-image: linear-gradient(120deg, #DF0959 0%, #910123 100%);}
.abtract {position:absolute; right: 0px; bottom: 0px;}
.abtract img {height:200px; opacity: 0.5;}

.guideList {width: 18%; position: fixed; top:36px; background: #fff; overflow: scroll; left: 0px;  height: 93vh; grid-template-columns: 80% auto;  background-repeat: no-repeat; background-position: right top;}
.featureList {padding:20px 0px 20px 0px;}
.featureList h4 {color: #515151; font-weight: 400; padding-left: 20px; display: none;}
.featureList p {font-weight:600; margin: 20px 0 0px 0; padding-left: 20px; display: none;}
.featureList ul {list-style:none; padding: 0px; margin-top: 5px; text-align: center;}
.featureList ul li {border-right: solid 1px #f1f1f1;}
.featureList ul li a span {margin: 0 20px 0 0; display: block; width: 100%;}
.featureList ul li a img {width:20px;}
.featureList ul li a { vertical-align: middle; width:100%; display: block; border-bottom: solid 1px #f1f1f1; font-size: 9px; padding: 2px ; transition: 1s; -webkit-transition: 1s;}
.featureList ul li a:hover {color:#000; background: rgba(219,40,40,.1);}
.featureList ul li .active {color:#DB2827; background: rgba(219,40,40,.2); font-weight: 600;}

.guideContent {position:absolute; right: 0px; width: 80%;}



/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
   .carousel .item .col-xs-12:nth-last-child(-n+2) {
      display: none;
   }
}

@media all and (min-width: 768px) {
	.clientUI {height:100vh;}
	.clientUI h3 {font-size:30px;}
	.navbar-top-links {position:relative; top: auto; right: auto;}
	.sidebar  {margin-top:60px; border-top: solid 1px #f0efef;}
	.nav-tabs li a {font-size: 16px; padding:10px 30px;}
	.TableControls {position:absolute; right: 16px; top: 15px; padding-top: 10px;}
	.panel-default table {width:100%;}
	.carousel img {width:80%;}
	.f-Box {margin: 20px 10px 0 0; height:65vh;}
	.f-Cont h3 {color:#fff; font-size: 44px;}
	.abtract img {height:250px; opacity: 1;}
	.smallFlexBox .abtract img {height:160px;}
	.smallFlexBox .flexCont {position:absolute; top:40px; left:40px; z-index: 99;}
	.f-Cont {top:8%; left:40px; }
	.f-Cont h3 {color:#fff; font-size: 50px;}
	.f-Cont ul li a {font-size:18px;}
	
	.guideList {width: 15%; position: fixed; top:60px; background: #fff; left: 251px; overflow: hidden;  height: 93vh; grid-template-columns: 80% auto; background-image: url("pages/images/side-bg.png"); background-repeat: no-repeat; background-position: right top;}
	.featureList {padding:20px 0px 20px 0px;}
	.featureList h4 {color: #515151; font-weight: 400; padding-left: 20px; display: block;}
	.featureList p {font-weight:600; margin: 20px 0 0px 0; padding-left: 20px; display: block;}
	.featureList ul {list-style:none; padding: 0px; margin-top: 5px; text-align: left;}
	.featureList ul li a span {margin: 0 20px 0 0; height: 30px; display: inline-block; width: auto;}
	.featureList ul li a img {width:24px;}
	.featureList ul li a { vertical-align: middle; width:100%; display: block; font-size: 16px; border-bottom: solid 1px #f1f1f1; padding: 12px 50px 12px 14px; transition: 1s; -webkit-transition: 1s;}
	.featureList ul li a:hover {color:#000; background: rgba(219,40,40,.1);}
	.featureList ul li .active {color:#DB2827; background:rgba(219,40,40,.2); font-weight: 600;}
	.guideContent {position:absolute; right: 0px; width: 80%;}

}

@media only screen and (min-device-width: 320px) and (max-device-width: 600px) and (orientation: portrait) {
	.f-Cont {top:8%; left:40px; }
	.f-Cont h3 {color:#fff; font-size: 30px;}
	.f-Cont ul li a {font-size:18px;}
	
}
@media only screen and (min-device-width: 320px) and (max-device-width: 600px) and (orientation: landscape) {
	.f-Cont {top:8%; left:40px; }
	.f-Cont h3 {color:#fff; font-size: 30px;}
	.f-Cont ul li a {font-size:18px;}
}

@media only screen and (min-device-width: 375px) and (max-device-width: 900px) and (orientation: landscape) {
	#f-Slide {height: 500px;}
	.f-Box {margin: 20px 10px 0 0; height:500px;}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) {
	#f-Slide {}
	.f-Box {margin: 20px 10px 0 0; height:500px;}
	.f-Cont h3 {color:#fff; font-size: 24px;}
	.f-Cont ul li a {font-size:16px;}
	.abtract img {height:200px; opacity: 0.5;}
}

@media only screen and (min-width : 3200px) and (max-height : 1800px) {
	
   .f-Box {margin: 20px 10px 0 0;}
	.f-Cont h3 {color:#fff; font-size: 24px;}
	.f-Cont ul li a {font-size:16px;}
	.abtract img {height:300px; opacity: 0.5;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.guideList {width: 10%; background: none; top: 36px;}
	.featureList ul li a {width:100%; display: block; font-size: 9px; padding: 2px ; text-align: center;}
	.featureList ul li a span {margin: 0 20px 0 0; display: block; width: 100%;}
	.guideContent {position:absolute; right: 0px; width: 85%;}
	.featureList h4 {display: none;}
	.featureList p {display: none;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.guideList {width: 20%; background: none; top: 36px;}
	.featureList ul li a {width:100%; display: block; padding: 5px 10px; font-size: 12px; text-align: left;}
	.featureList ul li a img {width:20px;}
	.guideContent {position:absolute; right: 0px; width: 73%;}
	
}