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

}
@media only screen and (min-width: 1400px) {

}
@media only screen and (min-width: 1600px) {

}

@media only screen and (min-width: 1250px) {
	/*.container{width: 1200px;}*/
}
/*ipad - both*/
@media (min-width: 768px) and (max-width: 1023px){
	.cardsFace h1{font-size: 1.3rem}
	.container{ width: 100% } 

} 
/*ipad - landscape*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){


}
/*ipad - portrait*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait), only screen and (min-width: 768px) and (max-width: 900px){

}

@media (min-width: 900px){	
.cardsFace h1{padding: 0 0px 5px 0px;}
.cardsFace h1 br{display: none;}
.cardsFace .stxt{font-size: 14px; color: #fff;font-weight: 600;width: 60%;}
.cardsFace .stxt br{display: none;}
}

@media (min-width: 768px) {

.v-mob{display: none;}
.explorecd .c_blue {background: url(../resources/images/cc_red_d.png) no-repeat bottom right;background-size: 100% 100%;/*background-position: 90% 10px;*/}
.explorecd .c_violet {background: url(../resources/images/cc_blue_d.png) no-repeat bottom right;background-size: 100% 100%;/*background-position: 90% 30px;*/}
.explorecd .c_blue .cardsFace{background: url(../resources/images/c_blue.png) no-repeat bottom center;background-size: 150px;background-position: 90% 20px;}
.explorecd .c_violet .cardsFace{background: url(../resources/images/c_violet.png) no-repeat bottom right;    background-size: 150px;background-position: 90% 40px}
.c_purple{background: url(../resources/images/cc_blue_d.png) no-repeat top center ;background-size:  100% 100%; }
.c_green{background: url(../resources/images/cc_red_d.png) no-repeat top center ;background-size:  100% 100%;}
.c_purple .cardsFace{background: url(../resources/images/hand_card.png) no-repeat top center;background-size: 100px;background-position: 85% 40px; }
/*.c_green .cardsFace{background: url(../resources/images/wallets.png) no-repeat top center;background-size: 70px;background-position: 85% 35px;}*/


/*#pills-Super .categroyBx, #pills-emi .categroyBx, #pills-fuel .categroyBx{width: 320px;margin: 0 auto;}*/
.categoryCarousel {position: relative;}
.categoryCarousel .owl-nav{position: absolute;top: 35%;color: #1d86ff;font-size: 70px;    font-weight: lighter;width: 100%;}
.categoryCarousel .owl-nav .owl-prev{position: absolute;left: -30px;}
.categoryCarousel .owl-nav .owl-next{position: absolute;right: -30px;}
.categoryCarousel .owl-nav .owl-prev:hover, .categoryCarousel .owl-nav .owl-next:hover{background: transparent;color: #1d86ff;}
.headtitle{width: 60%;margin: 10px auto 30px;}
.swhyBx .innerdiv img{display: inline-block;width: 29%;vertical-align: top;min-height: 180px;}
.swhyBx .innerdiv div{display: inline-block;width: 70%;vertical-align: top;}
.applycardli li{margin-bottom: 5px;}
.applycardli li p{vertical-align: top;}
.swhyBx .innerdiv img{border-bottom-left-radius: 20px;border-top-left-radius: 20px;border-top-right-radius: 0;}
.headtitle h1{font-size: 20px;}
.rngecategory .rngeBx{width: 25%;}
.rngetxt br{display: none;}
.checkeligibility .voucher, .checkeligibility2 .voucher2{width: 450px; margin:0px auto 5px; box-shadow: 0 0 10px #666; border-radius: 20px; }
.checkeligibility .lifetime, .checkeligibility2 .lifetime2{margin:0px auto;/*border-top-right-radius: 20px; border-top-left-radius: 20px;*/padding: 25px 10px;}
.checkeligibility .lifetime h6, .checkeligibility2 .lifetime2 h6{padding-right: 20px;margin-bottom: 0;}
.checkeligibility .lifetime h6, .checkeligibility .lifetime a, .checkeligibility2 .lifetime2 h6, .checkeligibility2 .lifetime2 a{display: inline-block;}
.applycardli li p:last-child{width: 95%;}
.applynow_alt .voucher{left: 50%; transform: translate(-50%, 2%);}
#explore_all_credit_cards{margin-top: -50px;margin-bottom: 5px;}
#why_hdfc_credit_cards{margin: 10px auto 5px;}
.salaried > img{width: auto !important; margin: 0 auto; display: block;}
.featureTabs li{margin-right: 25px;}
.featureTabs{margin-bottom: 30px;}
.featureTabs .nav-link{padding: 13px 20px 13px 55px;font-size: 14px;}
.cardmenuLi .col-lg-2{display: inline-block;width: 19%;}
.whyCbox{padding:0;}

}

@media (max-width: 1200px){
	.container{ max-width: 940px }
}

@media (max-width: 899px){
	.cardsFace .stxt{display: none;}
}

/*all mobiles & small tabs*/
@media (max-width: 767px){
	.v-desk{display: none;}
	.v-mob{display: block;}
	.navbar-brand{text-align: center;width: 100%;}
	.container{ width: 100% } 
	.switchcontent .firstswitch,.switchcontent .secondswitch{width: 30%;}
	.cardsFace{ min-height: 140px;padding:15px 15px 0px 0px; }
	.rngecategory .rngeBx {width: 40%;}


.cardsFace h1{ font-size: 1.5rem; line-height:1.7rem;  }


.cardDlist1{margin-bottom: 20px;padding: 10px 10px; text-align: left; background: #fff; box-shadow: 0px 10px 20px rgba(0,0,0,0.15)}
.cardDlist1 img{display: inline-block;padding-right: 10px;}
.cardDlist1 p{display: inline-block;font-size: 13px;font-weight: 600;margin-top:0px}
.cardDlist1 p br{ display: none; }
.cardDlist1 a{ display: block; width: 100%;  padding: 0px 0px}

.headtitle{margin-bottom: 20px;border-radius: 10px;padding: 10px; }
.savingcal .bnxTxt h4{font-size: 22px;padding-bottom: 10px;color: #fff;}
.savingcal .bnxTxt p{font-size: 13px;padding-bottom: 12px;color: #fff;}
.savingcal .bnxTxt a{text-align: center;margin: 0px 0 0}
.iconlist { margin-bottom: 2rem }
.savingcal .bnxTxt{ padding: 0px 0px; top: 8px; }

.salaried h2{ font-weight: 600; font-size: 23px;}
.salaried h6{ font-weight: 400; font-size: 16px;}
.salaried{ text-align: center; position: relative; }
.salaried h2 br{ display: block; }
.salaried > img{ width: auto; text-align: center; }
.modal-dialog{width: 70%;}
#comparisonPop .modal-dialog{max-width: 85%;}
.cardDiv .cardcontent .cardImg{width: 90%;}
.youtube-video-container {
    padding-top: 56.25%;
    height: 0px;
    position: relative;   
}

.youtube-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.wrapper#festivetreat::after { content: ""; background:url(../resources/images/mobile_bottom.jpg)#fff no-repeat ; width: 100%; height: 80%; position: absolute; background-size: contain; left: 0; top: 460px; z-index: 2;}
.wrapper#festivetreat::before{ content: ""; background: url(../resources/images/mobile_top.jpg) no-repeat; width: 100%; height: 100%; position: absolute; background-size: contain; left: 0; z-index: 1; }
}

@media (max-width: 580px){
	.Astepbx .twobx img, .Astepbx .twobx p{display: inline-block; vertical-align: bottom;}
	.checkeligibility .voucher, .checkeligibility2 .voucher2{width: 90%; margin: 0px auto 5px; }
	.checkeligibility .lifetime, .checkeligibility2 .lifetime2{width: 100%; margin:0px auto;border-top-right-radius: 20px; border-top-left-radius: 20px;}
	.applynow_alt .voucher, .applynow_alt2 .voucher2{left: 50%; transform: translate(-50%, 2%);}
	.ccArticle .item:first-child{margin-right: 10px}
	#articles{margin-bottom: 0;}
	.ccArticle .item:first-child{margin-right: 10px;}
	.ccArticle .item{width: 47%;margin: 0;}
	.artbbx p{font-size: 13px;}
	#comparisonPop .modal-dialog{max-width: 98%; width: 98%; margin: 20px auto 0;}
	.ccardCarousel .cardDiv .cardcontent .redbtn{top: 90%;}
	.Astepbx{width: 100%;min-height: 110px;}
	.Astepbx .onebx{display: inline-block;width: 50px;margin: 0;text-align: center;height: 50px;    vertical-align: top;padding-top: 25px;}
	.Astepbx .twobx{display: inline-block;width: 79%}
	.stline:after{background: url(../resources/images/linev2.png) no-repeat;position: absolute;content: '';
    width: 10px;top: 60%;height: 50%;left: 22px;}
    .applycard .tnc{width: 100%;margin-top: -30px}
    .cardDiv .cardcontent h4{font-size: 14px;}
    #top{margin-bottom: -50px;}
    .faqhalf li .faqHTxt p:last-child{width: 90%;font-size: 12px;}
    .Swhyhdfc{padding-top: 0;}
    .applystep{ padding-left: 0; }
    .explorecd .c_blue .cardsFace{min-height: 190px;background-position-y: 160%;}
    .explorecd .c_violet .cardsFace{min-height: 190px;background-position-y: 120%;}
    .c_purple .cardsFace{min-height: 190px; background-position-y: 100px;background-position-x: 20px;}
    .c_green .cardsFace{min-height: 190px;background-position-y: 90%;background-position-x: 70%;}
}
@media (max-width: 300px){
	.categroyBx{height: 750px !important;}
}

@media (max-width: 480px){
	.comcardCarousel .item p{font-size: 11px;padding: 0;}
	.cardDiv .cardcontent .cardImg{width: 85%;margin: 0 auto 10px;}
	.ccardCarousel .cardDiv .cardcontent .redbtn{top: 80%;}
}

@media (max-width: 420px){
	.comparcards .ctas a{width: 120px;font-size: 12px;padding: 10px 10px;margin: 5px;}
	.ccardCarousel .owl-nav .owl-prev{left: 23%}
	.ccardCarousel .owl-nav .owl-next{right: 23%}
	#everyting_about_credit_cards p{width: 70%;}
	.checkeligibility .voucher .redeemtxt .logos p, .checkeligibility2 .voucher2 .redeemtxt2 .logos2 p{width: 100%}
	.checkeligibility .voucher .redeemtxt .logos p img, .checkeligibility2 .voucher2 .redeemtxt2 .logos2 p img{display: inline-block;width: 48%;}
	.checkeligibility .voucher .redeemtxt .logos p:nth-child(2) img, .checkeligibility2 .voucher2 .redeemtxt2 .logos2 p:nth-child(2) img{width: 32%}
	.cardDlist1 p{width: 70%;vertical-align: middle;}
	.cardsFace h1{font-size: 1.3rem;}
}

@media (max-width: 380px){
	html{ font-size: 13px }
	.switchcontent .firstswitch img, .switchcontent .secondswitch img{width: 100%;}
	.switchcontent p{font-size: 12px;}
	.ccardCarousel .cardDiv .cardcontent .redbtn{top: 75%;}
	.ccardCarousel .cardDiv .cardcontent .redbtn{width: 90%; font-size: 13px;}
	.Astepbx .twobx img{width: 55px;}
	.Astepbx .onebx{padding-top: 15px;}
	#pills-Super .categroyBx, #pills-fuel .categroyBx, #pills-emi .categroyBx{width: 95%;}
}

@media (max-width: 350px){
	.checkeligibility .voucher .redeemtxt p, .checkeligibility2 .voucher2 .redeemtxt2 p{font-size: 14px;padding: 10px 0 0;}
	.checkeligibility .voucher .amountv h4 span, .checkeligibility2 .voucher2 .amountv2 h4 span{font-size: 26px;}
	.checkeligibility .voucher .amountv h4, .checkeligibility2 .voucher2 .amountv2 h4{font-size: 12px;padding-bottom: 10px;}
	.checkeligibility .voucher .redeemtxt .logos img, .checkeligibility2 .voucher2 .redeemtxt2 .logos2 img{vertical-align: middle;width: 75px;padding: 5px;}
}

@media (max-width: 330px){
	html{ font-size: 11px }
	.cardDlist1 p{width: 70%;vertical-align: middle;}
	.rngecategory .rngeBx{padding: 5px;}
	.rngecategory .rngeBx p{font-size: 11.5px;}
}