body,table
{
    FONT-FAMILY: Segoe UI, Verdana, Tahoma, Arial, Sans-Serif;
    BACKGROUND-COLOR: #ffffff;
    COLOR: black;
    TEXT-DECORATION: none;
}

body
{
  margin-top: 0;
}

.list-house
{
	width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  padding-left: 16px;
  padding-right: 16px;
}

.list-house:not(:first-of-type)
{
  margin-top: 4px;
}

.price, .descriere
{
  border-top: 1px solid #DDDDDD;
}

.list-house, #infoRentTop
{
  border-bottom: 8px solid #DDDDDD;
}

#infoRentTop
{
/*  
  position: sticky;
  z-index: 1000;
  top: 0;
*/  
  background-color: white;
  padding-top: 4px;
}

#infoRentTop p
{
  position: relative;
  top: 6px;
  margin-top: 0;
}

.tdPicture
{
	width: 356px;
}

.mainPicture
{
	width: 324px;
}

.thumbPicture
{
	width: 58px;
  float: left;
  margin: 4px;
}

.thumbPictures
{
	padding-left: 10px;
	margin: 0px;
}

td.tdPicture img
{
  -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.25));
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.25));
	cursor: pointer;
  border-radius: 6px;
}

.title, .descriere
{
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-top: 6px;
}

.title, .descriere, .phone
{
  zoom: 1.25;
}

.title
{
  font-weight: 500;
}

.title a
{
  text-decoration: none;
  color: initial;
}

.price
{
	color: black;
	padding: 4px;
}

.price::after
{
  content: "\20AC";
  position: relative;
  top: -8px;
  margin-left: 4px;
}

.price
{
	font-weight: bolder;
}

.contact, .price
{
  font-size: xx-large;
  font-family: fantasy;
}

.an, .utila, .teren, .uz, .parcare, .front, .zona, .alte, .disp
{
	padding-left: 12px;
}

.info
{
	color: #808080
}

.utila .info::after
{
  content: "Suprafata Utila: ";
}

.teren .info::after
{
  content: "Suprafata Teren: ";
}

.an .info::after
{
  content: "An constructie: "
}

.uz .info::after
{
  content: "Uz: "
}

.parcare .info::after
{
  content: "Parcare (interioara): "
}

.front .info::after
{
  content: "Front: "
}

.zona .info::after
{
  content: "Zona: "
}

.alte .info::after
{
  content: "Alte: "
}

.disp .info::after
{
  content: "Disponibil: "
}

td p
{
	text-align: center;
}

.containerPictures
{
  position: relative;
  text-align: center;
}

.top-right
{
  position: absolute;
  top: 8px;
  right: 24px;
  background-color: Black;
  color: White;
  padding: 2px 4px 4px 4px;
  border-radius: 6px;
  pointer-events: none;
  user-select: none;
}

.top-right::after
{
  content: "De inchiriat";
}

.unavailable
{
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1) blur(4px);
}

.unavailable .top-right::after
{
  content: "Indisponibil";
}

.unavailable .phone .number::after
{
  content: "";
}

.unavailable .price, .unavailable .phone
{
  visibility: hidden;
}

.logo
{
	color: #F0F0F0;
	text-align: right;
}

.closed
{

	-webkit-animation: animateClosed 0.5s forwards;
	animation: animateClosed 0.5s forwards;
	position: fixed;
}

@-webkit-keyframes animateClosed
{
    0% { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(100%); }
}
@keyframes animateClosed
{
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

.modal
{
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.75);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.modal-content
{
  margin: auto;
  display: block;
  max-width: 90%;
	max-height: 90%;
}

 img#imgModal
{
	width: auto;
	height: auto;
  -webkit-filter: drop-shadow(2px 2px 4px rgba(255,255,255,1));
  filter: drop-shadow(2px 2px 4px rgba(255,255,255,1));
}

.modal-caption
{
  text-align: center;
  color: #c6c6c6;
  padding: 8px;
  position: fixed;
  bottom: 0;
}

.modal-content, .modal-caption
{    
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.25s;
  animation-name: zoom;
  animation-duration: 0.25s;
}

#listIMG
{
  touch-action: none;
}

#closeListIMG, #prevListIMG, #nextListIMG, #countListIMG
{
  position: absolute;
  top: 8px;
  right: 16px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.25s;
}

#countListIMG
{
  top: initial;
  bottom: 0;
  text-align: center;
  width: 100%;
}

#closeListIMG:hover, #closeListIMG:focus
{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#prevListIMG, #nextListIMG
{
  z-index: 1002;
  top: 50%;
  cursor: pointer;
}

#prevListIMG
{
  left: 0;
}

#nextListIMG
{
  right: 0;
}

.arrow
{
  width: 12px;
  height: 12px;
  border: solid white;
  border-width: 0 12px 12px 0;
  display: inline-block;
  padding: 6px;
  margin: 24px;
}

.right
{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left
{
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.arrow:hover, .arrow:focus
{
  border-color: #bbb;
}

@-webkit-keyframes zoom
{
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom
{
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 90%)
{
  .modal-content
  {
    width: 90%;
  }
}

.phone .number
{
  cursor: pointer;
}

.phone .number::after
{
  content: "(arata numarul)";
  margin-left: 4px;
  font-size: 25%;
  line-height: 100%;
  vertical-align: middle;
  font-weight: normal;
  border-bottom: 1px dotted;
}

.phone .number a
{
  text-decoration: none;
  color: inherit;
}

.phone
{
  color: gray;
  display: block;
  margin-bottom: 4px;  
}

.phone .symbol::before
{
  content: "\2706";
  padding-right: 2px;
}

.whatsapp::before
{
  content: "\f40c";
  font-family: "Font Awesome 5 Brands";
  margin-left: 4px;
}

.whatsapp
{
  color: #25D366!important;
}

.phone.reveal
{
  color: black;
}

.phone.reveal .number::after
{
  display: none;
}

.phone.reveal .symbol::before
{
  animation: animateWobble 1s ease 0s 1 normal forwards;
}

/*
.list-house .price
{
  filter: blur(8px);
  color: #25D366;
}

.list-house:has(.phone.reveal) .price 
{
  filter: blur(0);
  color: #25D366;
}
*/

@-webkit-keyframes animateWobble
{
    0%,
    100%
    {
      -webkit-transform: translateX(0%);
      -webkit-transform-origin: 50% 50%;
    }
  
    15% { -webkit-transform: translateX(-8px) rotate(-16deg); }
    30% { -webkit-transform: translateX(4px) rotate(8deg); }
    45% { -webkit-transform: translateX(-4px) rotate(-4deg); }
    60% { -webkit-transform: translateX(2px) rotate(2deg); }
    75% { -webkit-transform: translateX(-2px) rotate(-2deg); }
  
}

@keyframes animateWobble
{
	0%,
	100%
  {
		transform: translateX(0%);
    transform-origin: 50% 50%;
	}

	15% { transform: translateX(-8px) rotate(-16deg); }
	30% { transform: translateX(4px) rotate(8deg); }
	45% { transform: translateX(-4px) rotate(-4deg); }
	60% { transform: translateX(2px) rotate(2deg); }
	75% { transform: translateX(-2px) rotate(-2deg); }
}

@media only screen and (max-width: 640px)
{
  .tdPicture
  {
    display: block;
    margin: auto;
  }

  #prevListIMG, #nextListIMG
  {
    top: initial;
    bottom: -16px;
  }  

  .arrow
  {
    scale: 0.5;
  }

  #countListIMG
  {
    scale: 0.75;
    bottom: 4px;
  }

  .title
  {
    font-weight: initial;
  }

}