@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
html,body{ height: 100%; font-family: 'Open Sans', sans-serif;}
body{overflow-x:hidden}
.white-bg{ background: #fff}
.light-bg{ background: #fafafa}
.dark-bg{ background: #293a4a;}
p{color: #7e8890; margin: 0px; padding: 0px; line-height: 24px; font-size: 14px;}
.p-100tb{padding: 100px 0px;}
.p-100t{padding-top: 100px;}
.p-100b{padding-bottom: 100px;}
.p-30t{padding-top: 30px;}
.p-30b{padding-bottom: 30px;}
.p-30tb{padding-top: 30px; padding-bottom: 30px;}
.p-80b{ padding-bottom: 80px !important;}
section h2{ font-size: 36px; font-weight: 300; color: #333c4e;line-height: 28px; margin-top: 0px; margin-bottom: 40px;}
.tagline{ font-size:18px; font-weight: 400; line-height: 30px;}
section.dark-bg h2{color: #fff;}
.no-mrg{ margin:0px !important}
.no-pad{ padding:0px !important}
.mrg-0lr{ margin-left: 0px; margin-right: 0px;}
.float-r{float:right;}
.float-l{float:left;}
.w-100{width:100%;}
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    border-left: 0 !important;
}
.login-form .form-control.my-password{border-right: 0 !important;}
.input-group-addon:last-child{ border-left: 0 !important; outline:none;}
.text-danger { color: #ff0000 !important; }
/*! =====================================================================================
======================= INTRO SECTION STYLING STARTS HERE =======================
===================================================================================== */
.intro-section{min-height:100%; background:url(../img/homepage/intro-bg.png) no-repeat #0062b5; background-size:cover; background-position:top center;padding-bottom: 20px;}
/* TEXT SLIDER */
.intro-slder{}
#quotes,
#quotes li blockquote,
#quotes li cite { display: block; clear: both;font-size: 36px; color:#fff;}
#quotes { height: 100%; overflow: visible; min-height: 150px; padding-top: 50px;}
#quotes.ul { position: relative; display: block; overflow: visible; margin: 0 }
#quotes li { list-style: none; position: absolute }
#quotes li blockquote { font-weight: 100; top: 0; left: 0; overflow: visible; list-style: none; opacity: 0; margin: 0 }
#quotes li cite { font-style: normal; font-weight: 600}

/* LOGIN FORM */
.login-form{ padding:30px; background: rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.26); -moz-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.26); box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.26);border-radius: 5px;}
@media(max-width:1199px){.login-form{ padding:30px;}}
.login-form h2{ font-size: 24px; text-transform: uppercase; font-weight: 300; color: #333c4e;margin-bottom: 26px;}
.login-form .form-group label{ color:rgba(79,79,79,0.80);    letter-spacing: 0.05em; font-size: 11px; text-transform: uppercase; font-weight: 600;}
.login-form .form-control{height: 40px !important;background: #fff !important;border: 1px solid #d8d8d8 !important;border-radius: 3px !important;}
.login-form .checkbox label, .login-form .checkbox a{font-size: 13px;line-height: initial;}
.login-form .checkbox label{color: #8b8b8b;}
.login-form .checkbox a{color: #0062b5;}
.login-form .checkbox input[type=checkbox]{margin: 3px 0 0 -20px;}
.login-form .checkbox{margin-top: -8px;margin-bottom: 18px;}

.new-user-sec{color: #718094; font-size: 10px; font-weight: 600; display:block;}
.login-btn{margin-left:10px;height: 45px;background: #0062b5;color: #fff;text-transform: uppercase;width: 100%;border: none;border-radius: 4px;font-size: 15px;}
.login-btn:hover{background: rgba(0, 98, 181, 0.9);}
.register-btn{margin-right:10px;height: 45px;width: 100%;  color: #ff9600;border:1px solid #0062b5;border-radius: 4px;font-size: 13px;padding:5px 15px; display: block;}
.register-btn:hover{text-decoration:none;color: #ff9600;}
.or-bar{ position:relative; text-align: center; font-size: 14px; font-weight: bold; color: #c6ccd2; margin: 16px 0px;}
.or-bar:before{background:#dee2e7; width: 50%; height: 2px; content:''; position: absolute; top: 50%; left: 0px;}
.or-bar:after{background:#dee2e7; width: 50%; height: 2px; content:''; position: absolute; top: 50%; right: 0px;}

.customer-support h1{ color:#3c4858; font-size: 21px; font-weight: 600; background:url(../img/homepage/customer-support.png) no-repeat; padding-left:0px; margin: 0;min-height: 30px;}
@media(max-width:992px){.customer-support h1{font-size: 16px;}}
.customer-support h1 small{text-transform: uppercase; font-size: 12px; color: #718094; font-weight: 500; display: block;letter-spacing: 0.1em;padding-left: 40px;padding-bottom: 20px;padding-top: 10px;}
.customer-support h1 span{margin: 0px 10px;}
/*!--*/
/*! =====================================================================================
======================= ABOUT SECTION STYLING STARTS HERE =======================
===================================================================================== */
.info-box{ margin-bottom: 30px;}
.info-box h3{ font-size:22px;margin: 0; line-height: 18px; margin-bottom: 14px;}
/*!--*/
/*! =====================================================================================
======================= VIDEO GALLERY SECTION STYLING STARTS HERE =======================
===================================================================================== */
#video-gallery a{width: 100%; display: none; height: auto; overflow:hidden; position: relative;}
#video-gallery a:before{ background: url(../img/homepage/play.png) no-repeat rgba(0,98,181,0.8) center; top: 0; left: 0; bottom: 0; right: 0; position:absolute; content:'';}
#video-gallery a:first-child{display: block;}
/*!--*/
/*! =====================================================================================
======================= TESTIMONIALS SECTION STYLING STARTS HERE =======================
===================================================================================== */
.carousel-indicators .active{background:#31708f;}
.carousel-indicators li{border:1px solid #ccc;}
.carousel-control{width: 68px;height: 68px;border: 1px solid #d9d9d9;line-height: 62px;top:50%;margin-top:-34px;}
.carousel-control.left{left: -100px;}
.carousel-control.right{right: -100px !important;left: inherit !important;}
.carousel-control.left, .carousel-control.right{background-image:none;}
.media-object{margin:auto;margin-top:0; border: 4px solid #f89821; width: 75px; height: 75px;}
.quote{font-family: 'Libre Baskerville', serif; font-size: 16px; line-height: 28px; font-weight: 400; color: #7e8890; margin: 40px 0 20px 0;}
blockquote{border-left: 0px; margin-bottom: 0px; padding: 0px;}
blockquote p{color:#272727;font-size:13px; font-weight:600; }
cite{color: #7e8890; font-size:12px; font-weight:600;}

/*!--*/
/*! =====================================================================================
======================= APPS SECTION STYLING STARTS HERE =======================
===================================================================================== */
.apps-section{background:url(../img/homepage/apps-bg.png) no-repeat; background-position: center;background-size: cover; color: #fff; padding: 84px 0px;}
.apps-section h2{ color: #fff; margin: 0; margin-bottom: 20px;}
.apps-section .tagline{color: #fff; font-size: 15px; margin-bottom: 40px;}
.playstore-btn{background:url(../img/homepage/google-play.png) no-repeat center; width:180px; height:60px; text-indent: -9999px;display: inline-block; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out;}
.playstore-btn:hover{box-shadow: rgba(45,45,45,0.05) 0px 2px 2px, rgba(49,49,49,0.05) 0px 4px 4px, rgba(42,42,42,0.05) 0px 8px 8px, rgba(32,32,32,0.05) 0px 16px 16px, rgba(49,49,49,0.05) 0px 32px 32px, rgba(35,35,35,0.05) 0px 64px 64px;
    transform: translate(0, -2px);}
.retailer-app{ position:relative;}
.retailer-app::after{position: absolute;top: -20px;width: 1px;height: 120%;background: rgba(255, 255, 255, 0.3);content: '';right: 0;}
/*!--*/
/*! =====================================================================================
======================= CONTACT SECTION STYLING STARTS HERE =======================
===================================================================================== */

.form-control{background: #f6f6f6; border: 1px solid #dedede; border-radius: 5px; height: 45px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.0); box-shadow: inset 0 1px 1px rgba(0,0,0,.0);}
textarea.form-control{ width: 100%; height: 150px; resize: none;}
.contact-btn{ width:160px; height: 45px; border-radius: 30px;border-width: 0px;
    border-style: none;
    border-color: transparent;
	border-image: none;
    font-weight: 700;
	background: #ff9600;
	color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    outline: none;
    }

.contact-address h4{ color: #c2c2c2; font-size: 12px; font-weight: 700; text-transform: uppercase;  letter-spacing: 0.1em; margin: 0;}
.contact-address p{ color:#6c6c6c; font-size: 14px; line-height: 25px; font-weight: 600; margin: 4px 0 20px 0;}

.contact-form .left-input{ padding-left: 0px; padding-right: 7.5px}
.contact-form .right-input{ padding-right: 0px; padding-left: 7.5px;}

.copy-content p{ font-size: 11px; color: #a8a8a8; text-transform: uppercase; padding: 20px;}





.indexcity{z-index:9999;}
.right{right:0 !important;left:0 !important;}

@media only screen and (max-width: 991px){
	.navbar-header{display: flex;align-items: center;}
	.navbar-brand{height: auto;}
  .navbar-nav>li>a{color:#000;}
	.navbar-nav>li>a:hover{color:#000;background: #ffffff9e;border-radius: 5px;}
.navbar-toggle {margin-left: auto; background: rgba(18,42,62,.58);width: 42px;height: 42px;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;flex-shrink: 0;}
.navbar-toggle .icon-bar{background: #fff;}
	.navbar-collapse .navbar-nav{margin: 0 !important;}
	.navbar-collapse{background: rgba(255,255,255,0.58);padding:10px;border-radius: 10px;}
	
	#quotes{height: calc(100vh - 150px);}
	#quotes li{top: 50%;transform: translate(0%, -50%);}
}

@media only screen and (min-width: 992px){
	.navbar{display: flex;align-items: center;padding-top: 10px;}
	.navbar-collapse{margin-left: auto;}
	.navbar-brand{height: inherit;}
	.navbar-nav>li>a{color: #fff;padding-top: 10px !important;padding-bottom: 10px !important;transition: all .2s linear;}
	.navbar-nav>li>a:hover{background: #ffffff2e;border-radius: 5px;}
	.navbar-nav>li>a:focus{background: transparent !important;border: none !important;outline: none !important;}
	.navbar-nav>li>a:focus:hover{background: #ffffff2e !important;border-radius: 5px !important;border: none !important;outline: none !important;}
}











@media (max-width:600px){
	.tagline{text-align: justify;}
	.info-box{text-align: justify;}
}



@media (max-width:991px){
	#quotes{height: 100% !important;}
}

@media (max-width:767px){
	.overflow-hidden{overflow:hidden !important;}
	.intro-section{padding-bottom: 30px;}
	.intro-slder{padding:0px 
		!important;}
	#quotes{padding:20px;height:250px !important;}
	
	.login-form{padding: 24px;}
	
	.login-btns{display: flex;flex-direction: column-reverse;}
	.login-btn{margin:0 0 15px 0;}
	
	.customer-support h1 > div{flex-direction: column !important}
	.customer-support h1 > div a{margin-top: 15px}
	
	.img-responsive-mobile{max-width: 100%;height: auto;display: block;}
	
	.retailer-app .playstore-btn {margin-bottom: 50px;}
	
	.carousel-control{width:48px;height:48px;line-height:42px;top:15px;margin-top:0;}
	.carousel-control.left{left:0px;background:#fff;}
	.carousel-control.right{right:0px !important;left:inherit !important;background:#fff;}
	
	.contact-form .left-input{padding: 0;margin-bottom: 15px}
	.contact-form .right-input{padding: 0;}
}