.rec {margin: auto;	width:100%; max-width: 475px; background-color: #fff; display: block; }
.rec1 {position: relative; width: 100%;	display: block;	margin: 0 auto;	padding: 0; margin-bottom: 46px;}

.rec .caption {
	font-weight: 400;
	position: relative;
	display: inline-block;
	width:100%;
	margin:0; margin-top:20px;
	padding:0; 
	color:#557682;
	text-align: left;
}


.rec .caption h3 {font-size:25px;line-height:1.3;color:#557682;margin:0;padding:0;margin-bottom: 1px;}
.rec .caption h4 {font-size:20px;line-height:1.3;color:#557682;margin:0;padding:0;margin-bottom: 1px;}
.rec .caption h3 a, .rec h4 a {color:#557682; text-decoration: none;}
.rec .caption h5 {font-size: 20px; line-height: 1;color:#d35324;margin:0;padding:0;margin-top: 4px;}
.rec .caption .pcode {font-size: 16px; line-height: 1; position: absolute; bottom:-14px; right: 10px; display:block;}

.rec div.ofields {color:#401a0c;font-size: 12px; line-height: 1; background-color: #fff;  width: 84%; position: absolute; bottom:0; right: 0; padding:0; display: flex; justify-content: flex-end;}
.rec span.ofield {display: inline-block; padding: 11px 9px; text-overflow: ellipsis; white-space: nowrap; }

.rec span.olink {height: 100%; background: #1b7b9f; margin-left: 20px; padding-left: 18px; padding-right: 28px;}
.rec span.olink:hover { background: #1b7b9f; filter: brightness(125%);}
.rec span.olink a {height: 100%; color: #fff !important; text-decoration: none;}
.rec span.olink a::after {content: url("../img/icons/arrow-white-smal.png"); position: absolute; margin-left: 3px; top:13px;}

.rec .photo {position: relative; width: 100%; overflow: hidden; height:420px; cursor: pointer; cursor: hand; padding:0; margin:0; 
    -webkit-box-shadow: 3px 9px 36px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 3px 9px 36px 0px rgba(0,0,0,0.26);
    box-shadow: 3px 9px 36px 0px rgba(0,0,0,0.26);   
}
.rec .photo img {min-height: 100% !important; min-width: 100% !important; width: auto; height: auto; cursor: pointer; cursor: hand; margin: 0; padding: 0; border:0; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}


.rec   span.price-before{text-decoration: line-through;	margin-right: 8px;}
.rec   span.price-after{}








/*----------------------@media---------------------------*/

@media (max-width: 1520px) {
.rec .photo {max-height:340px;}
.rec .photo img {min-height:340px;}
}

@media (min-width: 1200px) and (max-width: 1400px){
.rec div.ofields {width: 92%;}     
}

@media (max-width: 991px){
.rec .photo {max-height:300px;}
.rec .photo img {min-height:300px;}
} 

@media (min-width: 768px) and (max-width: 991px){
.rec div.ofields {width: 100%;}     
}

@media (max-width: 767px){
.rec .photo {max-height:400px;}
.rec .photo img {min-height:400px;}
} 

@media (max-width:490px){
.rec .photo {max-height:280px;}
.rec .photo img {min-height:280px;}
.rec div.ofields {width: 96%;}         
}



@media (max-width:400px){
.rec div.ofields {width: 100%;}     
}

@media (max-width:320px){
.rec .photo {max-height:220px;}
.rec .photo img {min-height:220px;}
}