﻿/************************************** Responsive Styles **************************************************/
@media (max-width: 1179px) {
	.Wrapper,#MainBnr{margin:0 10px;width:auto;}
	#MainBnr{height:auto;}
	#MainBnr .BnrTxt{top:50px;}
	#Header .topHeader .ctrSpace{margin-left:130px;}
	#Header .cart{margin:20px 0 0;}
	#Header .search{margin:20px 0 0;}
	.sm li {padding:0 30px 0 10px !important;}
	#MainContent .products li{margin:0 21px 15px 0; width:23.3%;}
	#MainContent .products li .height{min-height:120px;}
	#Footer .floatLeft.newsletter input{width:69%;}
	#Footer .floatLeft.newsletter a.btn{padding:6px 10px;}
	#Footer .floatLeft.newsletter{margin-right:50px;}
	#MainContent .products2 .slide{width:300px !important;}
}

@media (max-width: 999px) {
	#Footer .floatLeft.newsletter input{width:68%;}
	#MainContent .products2 .slide{width:296px !important;}
}

@media(max-width: 979px) {
	#Header .topHeader .ctrSpace{margin-left:15px;}
	#Header .topHeader a{margin-left:10px;}
	#Header .logo{width:60%;}
	#MainBnr .BnrTxt{font-size:24px; top:12%; width:60%;}
	#MainBnr .BnrTxt span{font-size:35px;}
	#Header .search{width:38%;}
	#Header .search input{width:62%;}
	#Header .search a{padding:5px;}
	#Header .category{width:38%;}
	.sm li {padding:0 5px !important;}
	#MainContent .products li div a{margin-bottom:10px; width:100%;}
	#MainContent .products li{margin:0 17px 15px 0;}
	#MainContent .products li .height{min-height:140px;}
	#Footer .floatLeft.newsletter{margin-right:20px; width:30%;}
	#Footer .floatLeft.newsletter input{width:66.5%;}
	#MainContent .products2 .slide{width:237px !important;}
}

@media(max-width: 799px) {
	#Header .topHeader{height:auto;}
	#Header .topHeader span{margin:0px !important; line-height:22px; text-align:center; width:100%;}
	#Header {text-align:center;}
	#Header .bottomHeader{height:auto;}
	#Header .category{float:none; margin:7px auto 0; width:311px;}
	#MainBnr .BnrTxt{font-size:18px; top:5%;}
	#MainBnr .BnrTxt span{font-size:28px;}
	#MainContent .products li{margin:0 15px 15px 0;}
	#Footer .floatLeft.newsletter input{width:65.0%;}
	#MainContent .products2 .slide{width:225px !important;}
}

@media(max-width: 767px) {
	#Header .logo{float:none; width:auto;}
	#Header .cart{float:none; margin:10px auto 0; width:137px;}
	#Header .search{float:none; margin:auto; width:377px;}
	#Header .search input{width:60%;}
	#Header .search a{padding:5px 10px;}
	#MainBnr{display:none;}
	#MainContent .products li{margin:0 0 15px; width:48%;}
	#MainContent .products li:nth-child(2n){float:right;}
	#Footer .floatLeft{float:left; margin:0 0 15px !important; text-align:center; width:100% !important;}
	#Footer .floatLeft.newsletter div{margin:auto; width:300px;}
	#Footer .floatLeft.newsletter img{float:none; margin-top:10px;}
	#Footer .copy,#Footer .copy .floatRight{display:block; text-align:center; width:100%;}
	#MainContent .products2 .slide{width:290px !important;}
	
	#CartItems .GridHeader{display: none;}
    #CartItems tbody{width: 100%;}
    #CartItems tbody tr td{border:none;}
    
    #CartItems{border-left: 1px solid #efeff0;border-right: 1px solid #efeff0;border-bottom:none;}
    #CartItems tbody tr{overflow: hidden;height: auto;width: 100%;}
    #CartItems .GridRow td,#CartItems .GridAlternateRow td,#CartItems tr:last-child td{display: block;text-align: left;padding-left: calc(45% + 5px);position: relative;overflow: hidden;width:auto;height: auto;border-top: 1px solid #efeff0;background-color: #fff;}
    #CartItems .GridRow a,#CartItems .GridAlternateRow a{font-weight:normal;}
    #CartItems tr td:last-child{border-bottom-style:none;}
    #CartItems .SrNo,#CartItems .QtyColumn,#CartItems .PriceColumn{text-align:left!important;}
    #CartItems tbody tr td:before {content: attr(data-title);display: block;font-weight: bold;position: absolute;left: 0px;top: 0px;width:45%;height: 100%;background-color: #f4f4f4;padding:7px 5px;border-right: 1px solid #efeff0;}
    #CartItems .RedButton{float:left;padding:1px 10px;}

    #CartTotals tr td,#CartTotals tr th{border:solid 1px #efeff0;}
    #CartTotals tr td:last-child{display:none;}
	#CartTotals.Checkoput tr td:last-child{display:table-cell;}
    #CartTotals .PriceColumn{background-color:#fff;} 
	.ButtonPanel .Button{margin-bottom:8px;} 

    #LoginPage #RegisterBox{width:100%;float:none;margin-bottom:10px;}
    #LoginPage #LoginBox{width:100%;float:none;}
    #LoginPage .StyledBox{height:auto;}
    #AddressPanel .LeftPanel{width:100%;float:none;margin-bottom:10px}
    #AddressPanel .RightPanel{width:100%;float:none;} 
}

@media (max-width: 639px) {
	
	#MainContent .big_img{float:none; margin:0 0 30px; text-align:center; width:100%;}
	#MainContent .big_img .sm_img{float:none;}
	#MainContent .big_img .sm_img li{float:none; display:inline-block;}
	#MainContent .P_Detail{float:none; margin:0 0 30px; text-align:center; width:100%; clear:both;}
	.DesTxt{text-align:left;}	
	#MainContent .Breadcrumb .paging{float:none; margin:0px; padding:0px;}
	#MainContent .Breadcrumb .paging a{padding:0 5px 0 0;}
	#MainContent #cont_form,#MainContent .address{float:none; width:100%;}
	#MainContent .products2 .slide{margin:5px 15px 5px 5px; width:217px !important;}
}

@media (max-width: 479px) {
	#Header .search{width:300px;}
	#MainContent .products2 .slide{width:330px !important;}
    
}

@media (max-width: 439px) {
    
}

@media (max-width: 399px) {
    
}

@media (max-width: 383px) {
    
}

@media (max-width: 519px) {
   #MainContent .products li{width:100%;}
	#MainContent .products2 .slide{width:293px !important;}
}


/************************************** Smart Menus **************************************************/

@media(max-width: 799px) {
    .navbar-header {display:block;}
    #MainNav {display:none;height:auto;background:none;margin-top:1px;border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;}
	ul.sm ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;box-shadow:none;border:none;padding:0px;}
	ul.sm>li{display:block;border:none; background:#254386 none;padding:0px;text-align:left;float:none;width:100%;}
	ul.sm li{margin:0 0 1px; padding:0px !important;}
	ul.sm>li>a,ul.sm ul.sm-nowrap>li>a{white-space:normal;}
	ul.sm>li>a{white-space:normal;padding:0px 15px;}
    ul.sm ul.sm-nowrap>li>a{background-color:#C4E8FF;color:#000}
    ul.sm ul.sm-nowrap>li>a:hover{background-color:#7DCBFF;}
	ul.sm iframe{display:none;}
    ul.sm ul.sm-nowrap>li>ul>li>a{background-color:#ddd;}
    ul.sm ul.sm-nowrap>li>ul>li>a:hover{background-color:#aaa;color:#fff;}
    .sm a:hover, .sm a:focus, .sm a:active,.sm a.Active,.sm a.highlighted {color:#fff;background-color:#3560bf;}
    .sm li:last-child {background:#254386 none;margin-bottom:0px;}

    .sm li:first-child{border-top:none;}
    .sm > li > ul:before, .sm > li > ul:after {display:none;}
    .sm a span.sub-arrow,.sm ul a span.sub-arrow {top:50%;margin-top:-9px;right:auto;left:6px;margin-left:0;width:17px;height:17px;font:normal 16px/16px monospace!important;text-align:center;border:0;text-shadow:none;background:rgba(250,250,250,0.7);-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;display:block;position:absolute;color:#004F91;}
    .sm a.highlighted span.sub-arrow {}
    .sm a.has-submenu {padding-left:30px;padding-right:0px;}
	#MainNav{float:none;}
}