::-webkit-input-placeholder { color: #666;}
::-webkit-selection {background:#d52231;color:#fff;text-shadow:0 0 transparent}
 /* Firefox 19+ */
::-moz-placeholder { color: #666;}
::-moz-selection{background:#d52231;color:#fff;text-shadow:0 0 transparent}
 /* IE 10+ */
:-ms-input-placeholder {color: #666;}
::-ms-selection{background:#d52231;color:#fff;text-shadow:0 0 transparent}
/* Firefox 18- */
:-moz-placeholder {  color: #666;}
::selection{background:#d52231;color:#fff;text-shadow:0 0 transparent}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;-webkit-appearance:textfield;} 
img {-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none; max-width:100%}
a[data-toggle="modal"]{outline:none}
a { color: #d52231;}
a:hover {text-decoration: none;}
body {font-family: 'Roboto', sans-serif; background:#0f377c url(../images/bg-hdfc-fd.png) no-repeat top center/cover;}

.hamburger-icon:before { content: " "; display: block; position: fixed; top: 0; left: 0; height: 100%; width: 0; opacity: 0;  background: rgba(0, 0, 0, .4) }
.hamburger-icon { vertical-align: middle; position: relative; height: 32px; width: 32px; z-index: 100; cursor: pointer; display: inline-block }
.hamburger-icon div { position: absolute; height: 2px; right: 2px; left: 2px; background-color: #999; border: 0; -webkit-transition: -webkit-transform .2s ease-in-out .2s, top .2s ease-in-out .2s, background-color .3s; -moz-transition: -moz-transform .2s ease-in-out .2s, top .2s ease-in-out .2s, background-color .3s; -o-transition: -o-transform .2s ease-in-out .2s, top .2s ease-in-out .2s, background-color .3s; transition: transform .2s ease-in-out .2s, top .2s ease-in-out .2s, background-color .3s; vertical-align: top }
.hamburger-icon div.top { top: 25%; margin-top: -1px }
.open-nav .hamburger-icon div.top { transform: rotate(-135deg); top: 50% ; background-color: #d62625}
.hamburger-icon div.middle { top: 50%; margin-top: -1px }
.open-nav .hamburger-icon div.middle { opacity: 0 }
.hamburger-icon div.bottom { top: 75%; margin-top: -1px }
.open-nav .hamburger-icon div.bottom { transform: rotate(135deg); top: 50% ; background-color: #d62625}
.open-nav .off-canvas-main { transform: translateX(-260px);position: fixed; top: 0; bottom: 0; height: 100%; width: 100%; overflow: hidden; }
.open-nav .off-canvas-nav { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
.open-nav .hamburger-icon:before {opacity:1; width: 100%;}

.off-canvas-nav {position: fixed; width: 260px; right: -260px; background-color:#ffffff; border-left: 1px solid #c5c5c5; overflow-y: auto; z-index: 9; height:100%; overflow-x:hidden; overflow-y:auto}
.off-canvas-nav .list-unstyled li {position:relative}
.off-canvas-nav .list-unstyled li+li:after { content: " "; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background-color: #c5c5c5;}
.off-canvas-nav .list-unstyled a {position: relative;text-decoration: none; cursor: pointer; line-height: 40px; padding:0 20px;color: #58595b;text-transform: uppercase; font-size: 12px; display: block;}
.off-canvas-nav li.parent>a:after { content: ""; float: right; background-image: url(../images/spritesheet.png); background-position: -257px -232px; width: 7px; height: 12px; margin: 14px 0;}
.left-nav-toplink { height: 100%; overflow: hidden; overflow-y: auto; }
.off-canvas-nav .subMenu>div>span {text-align:right; position:relative;line-height:40px; padding: 0 15px; font-size: 12px; cursor:pointer}
.off-canvas-nav .subMenu>div>span:before { content: ""; display:inline-block; background-image: url(../images/spritesheet.png); background-position: -257px -220px; width: 7px; height: 12px; margin:-2px 8px;}
.subMenu {display: block; position: absolute; top: 0; height: 100%; width: 100%; right: -100%; text-transform: uppercase; background-color: #f3f3f3; overflow-x: hidden; overflow-y: auto;transition: transform .2s cubic-bezier(.215,.61,.355,1) .3s,right .3s cubic-bezier(.55,.055,.675,.19); transform-origin: 50% 0;}
.subMenu.openSub {transition: transform .2s cubic-bezier(.215,.61,.355,1) .3s,right .3s cubic-bezier(.215,.61,.355,1) .2s; right: 0;}

.product-list {min-height: 100%;}
.product-list.claimed { position: relative;}
.product-list.claimed:after {position: absolute; content:''; background: rgba(255, 255, 255, .8) url(../images/clamed.png) no-repeat center/75% auto; left: 0; right: 0; top: 0; bottom: 0;border-top-left-radius: .25rem; border-top-right-radius: .25rem;}
.bottomImg {margin-left: -170px;}
.mobile-img {margin-right: -50px;}

footer.row {background:#fbfbfb;}
footer li {color: #BBBBBB}
footer a {color: #BBBBBB}
footer li.list-inline-item:not(:last-child) { padding-right: .5rem; position: relative;}
footer li.list-inline-item:not(:last-child):after {content:"|"; font-size: 14px; color:#BBBBBB;position:absolute; right:-2px; top:0px}

.btn-primary { color: #fff; background-color: #002B74; border-color: #002B74; border-radius: 0; }
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {background-color: #254987; border-color: #224786;}

.lh-1 {line-height: 1}
.fw-100 {font-weight: 100}
.fw-300 {font-weight: 300}
.fw-400 {font-weight: 400}
.fw-700 {font-weight: 700}
.fw-900 {font-weight: 900}
.fs-10 {font-size: 10px}
.fs-12 {font-size: 12px}
.fs-14 {font-size: 14px;}
.fs-16 {font-size: 16px;}
.fs-18 {font-size: 18px;}
.fs-20 {font-size: 20px;}
.fs-22 {font-size: 22px;}
.fs-26 {font-size: 26px;}
.fs-24 {font-size: 24px;}
.fs-30 {font-size: 30px;}
.fs-36 {font-size: 36px;}
.fs-50 {font-size: 50px;}

.modal-header {background-image: linear-gradient(180deg, #002B74 15%, rgba(0,43,116,0.81) 100%);}
.modal-backdrop.show { opacity: .7; }
a.close-btn { right:0; top:-30px; position: absolute; content: ''; background:url(../images/close_icon.png) no-repeat center; width: 26px; height: 26px; z-index: 9; cursor: pointer; font-size: 0; text-indent: -9999px; }
.modal-content {margin-top: 26px;}
#Failed .modal-header {background-image: linear-gradient(180deg, #DD332F 15%, rgba(221,51,47,0.68) 100%);}

@media (min-width:1300px) {

.container { max-width:1270px;}
}

@media (max-width:991px) {
.mar-m {margin-top: -80px;}
}
@media (min-width:576px) {
.modal-dialog {max-width: 470px;}
}
@media (max-width:575px) {
footer  {text-align: center;}
.bann h3 {font-size:22px;}
}