@media only screen and (min-width: 960px) {
    /* styles for browsers larger than 960px; */
    .box {
        will-change: transform;
        height: 458px;
    	width:295px;
        padding: 5px 10px;
    	margin:2px;
    	display:inline-block;
    	padding:0px;
    	overflow:hidden;
    	text-decoration:none;
    	color:black;
    }
    .box:hover{
    	text-decoration:none;
    	color:black;
    }
    .box:hover b{
    	text-decoration:none;
    	color:var(--base-color);
    }
    .box img{
    	width:295px;
    	height:357px;
    }
    .grad{position:absolute;width:100%;height:50px;margin-top:-50px;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
    .box p{
    	color:#ffb10b;
    }
    .box .title{
    	width:100%;
    	height:25px;
    	padding:5px;
    	white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    	font-size:10pt;
    }
    .box .price{
    	margin-top:15px;
    }
    .offbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:445px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    .newbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:445px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
}
@media only screen and (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */
    .box {
        will-change: transform;
        height: 458px;
    	width:295px;
        padding: 5px 10px;
    	margin:2px;
    	display:inline-block;
    	padding:0px;
    	overflow:hidden;
    	text-decoration:none;
    	color:black;
    }
    .box:hover{
    	text-decoration:none;
    	color:black;
    }
    .box:hover b{
    	text-decoration:none;
    	color:var(--base-color);
    }
    .box img{
    	width:270px;
    	height:330px;
    }
    .grad{position:absolute;width:100%;height:50px;margin-top:-50px;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
    .box p{
    	color:#ffb10b;
    }
    .box .title{
    	width:100%;
    	height:25px;
    	padding:5px;
    	white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    	font-size:10pt;
    }
    .box .price{
    	margin-top:15px;
    }
    .offbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:445px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    .newbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:445px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    
}
@media only screen and (min-width: 2000px) {
    /* for sumo sized (mac) screens */
    .box {
        will-change: transform;
        height: 458px;
    	width:295px;
        padding: 5px 10px;
    	margin:2px;
    	display:inline-block;
    	padding:0px;
    	overflow:hidden;
    	text-decoration:none;
    	color:black;
    }
    .box:hover{
    	text-decoration:none;
    	color:black;
    }
    .box:hover b{
    	text-decoration:none;
    	color:var(--base-color);
    }
    .box img{
    	width:295px;
    	height:357px;
    }
    .grad{position:absolute;width:100%;height:50px;margin-top:-50px;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
    .box p{
    	color:#ffb10b;
    }
    .box .title{
    	width:100%;
    	height:25px;
    	padding:5px;
    	white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    	font-size:10pt;
    }
    .box .price{
    	margin-top:15px;
    }
    .offbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:445px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    .newbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:445px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    
}
@media only screen and (max-device-width: 480px) {
   /* styles for mobile browsers smaller than 480px; (iPhone) */
   
}
@media only screen and (min-device-width: 768px) and  (max-device-width: 1024px){
   /* default iPad screens */
   .box {
        will-change: transform;
        height: 305px;
    	width:180px;
        padding: 5px 10px;
    	margin:2px;
    	display:inline-block;
    	padding:0px;
    	overflow:hidden;
    	text-decoration:none;
    	color:black;
    }
    .box:hover{
    	text-decoration:none;
    	color:black;
    }
    .box:hover b{
    	text-decoration:none;
    	color:var(--base-color);
    }
    .box img{
    	width:180px;
    	height:217px;
    }
    .grad{position:absolute;width:100%;height:50px;margin-top:-50px;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
    .box p{
    	color:#ffb10b;
    }
    .box .title{
    	width:100%;
    	height:25px;
    	padding:5px;
    	white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    	font-size:10pt;
    }
    .box .price{
    	margin-top:15px;
    }
    .offbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:340px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    .newbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:340px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }

}

/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
     .box {
        will-change: transform;
        height: 305px;
    	width:180px;
        padding: 5px 10px;
    	margin:2px;
    	display:inline-block;
    	padding:0px;
    	overflow:hidden;
    	text-decoration:none;
    	color:black;
    }
    .box:hover{
    	text-decoration:none;
    	color:black;
    }
    .box:hover b{
    	text-decoration:none;
    	color:var(--base-color);
    }
    .box img{
    	width:180px;
    	height:217px;
    }
    .grad{position:absolute;width:100%;height:50px;margin-top:-50px;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
    .box p{
    	color:#ffb10b;
    }
    .box .title{
    	width:100%;
    	height:25px;
    	padding:5px;
    	white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    	font-size:10pt;
    }
    .box .price{
    	margin-top:15px;
    }
    .offbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:340px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    .newbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:340px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
     .box {
        will-change: transform;
        height: 305px;
    	width:180px;
        padding: 5px 10px;
    	margin:2px;
    	display:inline-block;
    	padding:0px;
    	overflow:hidden;
    	text-decoration:none;
    	color:black;
    }
    .box:hover{
    	text-decoration:none;
    	color:black;
    }
    .box:hover b{
    	text-decoration:none;
    	color:var(--base-color);
    }
    .box img{
    	width:180px;
    	height:217px;
    }
    .grad{position:absolute;width:100%;height:50px;margin-top:-50px;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
    .box p{
    	color:#ffb10b;
    }
    .box .title{
    	width:100%;
    	height:25px;
    	padding:5px;
    	white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    	font-size:10pt;
    }
    .box .price{
    	margin-top:15px;
    }
    .offbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:340px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    .newbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:340px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
}
@media only screen and (min-device-width: 360px) and (max-device-width: 481px) {
  /* For landscape layouts only */
     .box {
        will-change: transform;
        height: 271px;
    	width:160px;
        padding: 5px 10px;
    	margin:2px;
    	display:inline-block;
    	padding:0px;
    	overflow:hidden;
    	text-decoration:none;
    	color:black;
    }
    .box:hover{
    	text-decoration:none;
    	color:black;
    }
    .box:hover b{
    	text-decoration:none;
    	color:var(--base-color);
    }
    .box img{
    	width:160px;
    	height:192px;
    }
    .grad{position:absolute;width:100%;height:50px;margin-top:-50px;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
    .box p{
    	color:#ffb10b;
    }
    .box .title{
    	width:100%;
    	height:25px;
    	padding:5px;
    	white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    	font-size:10pt;
    }
    .box .price{
    	margin-top:15px;
    }
    .offbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:291px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
    .newbox {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    	border-radius:var(--border-radius);
    	height:291px;
    	width:100%;
    	overflow-y:hidden;
    	white-space: nowrap;
    	padding:15px;
    	padding-left:20px;
    }
}