
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.wrapper { max-width: 96%; margin: 0 2%; }

.paymentarea .colem select{ width:60%;}
.paymentarea .colem > div > strong.americanmsg{ display:block;}
.cardimageouter{ width: 56.5%;}
.horsedrawing-lf{width: 13%;}
.horsedrawing-mid{ overflow:auto; width:71%;}
.horsedrawing-rt{ width:13%;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
.subsription-lf { float: none; width: 100% }
.subsription-rt { float: none; width: 100%; margin-top: 20px; }
/* table start */
table.gridtable { width: 100%; border-collapse: collapse; border-spacing: 0; display: block; position: relative; width: 100%; border: 0px; border-left: 1px solid #002942; }
table.gridtable tr td, table.gridtable tr th { margin: 0; vertical-align: top; }
table.gridtable thead { display: block; float: left; }
table.gridtable tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
table.gridtable thead tr { display: block; }
table.gridtable tr th { display: block; text-align: right; text-transform: none; padding: 5px; border-bottom: 1px solid #c13832; border-right: 1px solid #002942; font: 700 14px/21px "Lato", sans-serif; min-height: 21px; }
table.gridtable tr th:nth-child(1) { border-top: 1px solid #002942; }
table.gridtable tbody tr { display: inline-block; vertical-align: top; }
table.gridtable tr td { display: block; text-align: center; font: 400 14px/21px "Lato", sans-serif; padding: 5px; min-height: 21px; }
table.gridtable tr td:nth-child(1) { border-top: 1px solid #002942; }
table.gridtable.firsttdnone tr td:nth-child(2) { border-top: 1px solid #002942; }
table.gridtable tr td a { height: 20px; display: block; }
table.gridtable tr td a img { height: 20px; }
table.gridtable.memberclub tr td:nth-child(3), table.gridtable.memberclub tr th:nth-child(3) { width: auto; }
table.gridtable.MerchandiseID tr th { min-height: 30px; text-align: right; }
table.gridtable.MerchandiseID tr td { min-height: 30px; }
table.gridtable.MerchandiseID tr td input[type=text] { height: 20px; }
table.gridtable.rptClubs tr th:nth-child(1), table.gridtable.rptClubs tr td:nth-child(1) { text-align: right; }
table.gridtable.rptClubs tr th:nth-child(2), table.gridtable.rptClubs tr td:nth-child(2) { width: auto; }
table.gridtable.rptMerchandise tr th:nth-child(4), table.gridtable.rptMerchandise tr td:nth-child(4), table.gridtable.rptMerchandise tr th:nth-child(5), table.gridtable.rptMerchandise tr td:nth-child(5), table.gridtable.rptMerchandise tr th:nth-child(6), table.gridtable.rptMerchandise tr td:nth-child(6), table.gridtable.rptClubs tr.total td:nth-child(2), table.gridtable.paymetndetail tr td:nth-child(2) { width: auto }
table.gridtable.rptMerchandise tr th, table.gridtable.rptClubs tr th, table.gridtable.paymetndetail tr th { border-right: 1px solid #002942; border-left: 1px solid #002942; }
table.gridtable.rptMerchandise tr td, table.gridtable.rptClubs tr td, table.gridtable.paymetndetail tr td { border-right: 1px solid #002942; border-bottom: 1px solid #002942 }
table.gridtable tr th{ white-space: nowrap; max-width:80px;
      overflow: hidden;
      o-text-overflow: ellipsis;
      text-overflow: ellipsis;}

table.gridtable tfoot { display: block; float: right; }
table.gridtable tfoot tr.total { display: block; }
table.gridtable tfoot tr.total td { display: block; text-align: right; text-transform: none; padding: 5px; border-left: 1px solid #c13832; border-bottom: 1px solid #c13832; border-right: 1px solid #002942; font: 700 14px/21px "Lato", sans-serif; min-height: 21px; }
table.gridtable.paymetndetail tr.total td:nth-child(2) { width: auto; font: 700 16px/21px "Lato", sans-serif }
/* ends here */

    /* breadcrumb start */

.crumbs li { width: 100%; margin-bottom: 2px; border: 1px solid #e18a00 }
.crumbs li a { display: block; float: none; border: 0 }
.crumbs li > span { display: none; }
.crumbs li:first-child a { border: 0; }
.crumbs li a:hover, .crumbs li:hover a { border: 0 }
.crumbs li.currentPage a { border: 0 }
.crumbs li.currentPage { border: 1px solid #8e0500; }
/* ends here*/

.subterms p { font: 400 16px/20px "Lato", sans-serif }
.subterms p label { font: 700 16px/20px "Lato", sans-serif }
.subscription6 .memberno.colem label { width: 30%; }
.tablehints { display: block; margin: 10px 0 }
.tablehints p { font: 400 14px/16px "Lato", sans-serif; color: #000 }
.tablehints p span { color: #f00; }
.paymentarea .colem select { width: 64%; }
.paymentarea .colem label { width: 25%; }
.paymentarea .colem > div { width: 70%; }
.paymentarea .colem select { width: 100%; }
.cardimageouter { width: 100%; padding: 4px 0 }
.cardimageouter input[type="text"] { width: 60%; }
.paymentarea .colem > div > strong.americanmsg { display: block; }
.colem > div > span { width: 100%; float: left; font: 400 14px/20px "Lato", sans-serif }
.horseregpay .colem label { display: inline-block; width: 53%; }
.horseregpay .colem > div { width: 40%; display: inline-block; text-align: right; }
.horseregpay .colem > div > span { float: none; width: auto; }

.horsedrawing-lf{width: 13%;}
.horsedrawing-mid{ overflow:auto; width:71%;}
.horsedrawing-rt{ width:13%;}
.accordion-section-title { margin: 0; width: 98%; padding: 5px 1%; text-align: center; }

footer p{ font:400 14px/20px "Lato", sans-serif }
.horsereceiptdetail tr > td{ display:block;}
.horsereceiptdetailinner tr td{display: table-cell;}

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.logincolem label, .colem label, .paymentarea .colem label { width: 100%; display: block; font: 700 14px/20px "Lato", sans-serif; text-align: left; padding: 0 }
.logincolem > div, .colem > div, .paymentarea .colem > div { display: block; width: 100%; }
.subscription1 h2 { padding: 0 0 10px 0 }
.colem label > span { line-height: 20px; }
.colem label.responsivedisplay { display: none; }
.colem.responsivecolem label { width: 80%; display: inline-block }
.colem.responsivecolem > div { width: auto; display: inline-block }
.subscription1 .colem > div input[type="checkbox"] { margin: 0 }
.subscription1 .checkboxgroup1 > div { display: block; }
.subterms { padding: 10px 0 }
.subscription6 .colem { margin-bottom: 10px; width: 100%; float: left; }
.subscription6 .colem label { font-weight: 700 }
.subscription6 .memberno.colem label { width: 100% }
.subscription6 .memberno.colem > div > span { font: 700 24px/32px "Lato", sans-serif }
.body-container h1 { padding: 10px 0 }
.paymentarea .colem select { width: 100%; }
.cardimageouter { width: 100%; padding: 4px 0 }
.cardimageouter input[type="text"] { width: 60%; }
.horsereg1 .colem label { width: 100%; }
.horsereg1 .colem > div { width: 100%; }
.accordion { margin: 0 }
.horsereg1 .colem table tr td label { display: inline-block }
.horsereg1 .colem table tr td input[type="radio"] { margin: 0 }
.horsereg1 .colem > div select.smlselect { width: 48%; }
.horsereg1 h2 { padding-left: 0 }
.horseregpay .colem label { display: inline-block; width: 53%; }
.horseregpay .colem > div { width: 40%; display: inline-block; text-align: right; }
.horseregpay .colem > div > span { float: none; width: auto; }
.markingareimg img { width: 100%; height: auto; }
.horsedrawing-lf, .horsedrawing-rt { float: none; width: 100%; margin: 0 }
.horsedrawing-mid { float: none; margin: 10px 0; width: 100%; overflow: auto }
.horsedrawing-rt figure { display: inline-block; text-align: center; width: 27%; margin: 5px 1%; border: 1px solid #eaeaea; padding: 5px; }
.topheadingsub h3 { width: 42%; }
.topheadingsub .radiobtntable { width: 100%; }
input[type="submit"], button, input[type="button"]{ margin-bottom:10px;}
.horsereg6paydetail .colem > div > span{ position:relative; left:0; top:0}
.horsereg6paydetail .colem > div{ width:100%; text-align:left;}
.horsereg6paydetail .colem.total > div > span{ float:none;}
.colem > div > span{ position:relative; left:0; top:0}
.cardimageouter > small{width: 80px; background-size:100% auto;}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
