/* @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap"); */

.loadingCard {
  display: flex;
  justify-content: space-around;
  opacity: .5;
}

.loadingCard a {
  text-decoration: none;
}

.loadingCard img[alt] {
  text-indent: -10000px;
}

.loadingCard .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 5rem;
}

@media screen and (max-width: 600px) {
  .loadingCard .container {
    margin: -0.5rem;
  }
}

.dark .loadingCard .card {
  background-color: #ebebeb;
}

.loadingCard .card {
  background-color: #363333;
  -webkit-box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4);
          box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4);
  padding: 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(82, 88, 102, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  /* width: 330px; */
  height: auto;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.loadingCard .card__header {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0.5rem 0 0.5rem 0.5rem;
}

.loadingCard .card__header .header__img {
  height: 2rem;
  width: 2rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.loadingCard .card__header .header__title {
  font-size: 1.0625rem;
  line-height: 1.375rem;
  color: #0e1217;
  font-weight: 700;
  margin: 0.5rem;
}

.loadingCard .card__body {
  margin: 0 0.5rem;
}

.loadingCard .card__body .body__text {
  color: #4c4c4d;
  font-size: 0.8125rem;
}

.loadingCard .card__body .body__img {
  height: 100%;
  margin: 0.5rem 0 1rem ;
}

.loadingCard .card__body .body__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: auto;
  border-radius: 0.75rem;
}

.loadingCard .card__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0.5rem;
}

.loadingCard .card:hover {
  border-color: rgba(82, 88, 102, 0.4);
}

.loadingCard ion-icon {
  font-size: 1.5rem;
  color: #525866;
  cursor: pointer;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.loadingCard ion-icon:hover:nth-of-type(1) {
  color: #15ce5c;
}

.loadingCard ion-icon:hover:nth-of-type(2) {
  color: #15ce5c;
}

.loadingCard ion-icon:hover:nth-of-type(3) {
  color: #fa6620;
}

.loadingCard .skeleton {
  -webkit-animation: skeleton-loading 1s linear infinite alternate;
          animation: skeleton-loading 1s linear infinite alternate;
}

.dark .loadingCard .skeleton {
  -webkit-animation: skeleton-loadingDark 1s linear infinite alternate;
          animation: skeleton-loadingDark 1s linear infinite alternate;
}

@-webkit-keyframes skeleton-loadingDark {
  0% {
    background-color: #fcfcfc;
  }
  100% {
    background-color: #cecaca;
  }
}

@keyframes skeleton-loadingDark {
  0% {
    background-color: #ffffff;
  }
  100% {
    background-color: #cac9c9;
  }
}

@-webkit-keyframes skeleton-loading {
  0% {
    background-color: #797676;
  }
  100% {
    background-color: #303030;
  }
}

@keyframes skeleton-loading {
  0% {
    background-color: #7e7e7e;
  }
  100% {
    background-color: #161616;
  }
}

.loadingCard .skeleton-text {
  width: 100%;
  height: 0.7rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.loadingCard .skeleton-text__body {
  width: 75%;
}

.loadingCard .skeleton-footer {
  width: 30%;
}

:root {
  --loading-grey: #868686;
}


.headerLoading .card {
  width: 100%;
  height: 530px;
  margin: auto;
  background-color: transparent;
  border-radius: 6px;
  overflow: hidden;
  opacity: .5;
  /* margin-bottom: 60px; */
}

.headerLoading .image {
  height: 100%;
}

.headerLoading .image img {
  display: block;
  width: 100%;
  height: inherit;
  object-fit: cover;
}

.headerLoading .content {
  padding: 2rem 1.8rem;
}

.headerLoading h4 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.headerLoading .description {
  font-size: 1rem;
  line-height: 1.4rem;
}

.headerLoading .loading .image,
.headerLoading .loading h4,
.headerLoading .loading .description {
  background-color: var(--loading-grey);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, 0) 60%
  ) var(--loading-grey);
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
  text-align: center;
}

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

.headerLoading .loading h4 {
  min-height: 1.6rem;
  border-radius: 4px;
  animation-delay: .05s;
}

.headerLoading .loading .description {
  min-height: 4rem;
  border-radius: 4px;
  animation-delay: .06s;
}

/* Most Search */

.dark .mostSearch .skeleton-box{
  background-color: #e9e9e9;
}

.mostSearch .skeleton-box {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: #3a3a3a;
}
.mostSearch .skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  animation: shimmer 5s infinite;
  content: '';
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
.mostSearch .blog-post__headline {
  font-size: 1.25em;
  font-weight: bold;
}
.mostSearch .blog-post__meta {
  font-size: 0.85em;
  color: #6b6b6b;
}
.mostSearch .o-media {
  display: flex;
}
.mostSearch .o-media__body {
  flex-grow: 1;
  margin-left: 1em;
}
.mostSearch .o-vertical-spacing > * + * {
  margin-top: 0.75em;
}
.mostSearch .o-vertical-spacing--l > * + * {
  margin-top: 2em;
}
main.mostSearch  {
  margin-top: 3em;
}
.mostSearch header h1 {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  font-size: 2em;
}
.mostSearch header p:not(:first-child) {
  margin-top: 1em;
}

/* Details */

.detailsLoading .fpo {
    position: relative;
    top: 45%;
    margin: auto;
    display: block;
}
.detailsLoading .pulsate{
  background: linear-gradient(-45deg, #DDDDDD, #F0F0F0, #DDDDDD, #F0F0F0);
	background-size: 400% 400%;
  opacity: .5;
	-webkit-animation: Gradient 2.25s ease infinite;
	-moz-animation: Gradient 2.25s ease infinite;
	animation: Gradient 2.25s ease infinite;
}
.detailsLoading .block {
  display:none;
  width:271px;
  height:16px;
  color: black;
}
.detailsLoading .block2 {
  width: 178px;
  height: 18px;
  margin-bottom:8px;
}
.detailsLoading .block3 {
  width:231px;
  height:18px;
  margin-bottom:16px;
}
.detailsLoading .circle {
  width:38px;
  height:38px;
  border-radius:50%;
  float:right;
  
}
.detailsLoading #card {
  box-sizing: border-box;
	width: 80%;
  /* height: 80vh; */
  background: transparent;
	position: relative;
	margin:auto;
	top:25%;
}
.detailsLoading .card-image {
  box-sizing: border-box;
  border-radius: 50px;
  display:block;
  width:100%;
  height:430px;
  margin: auto;
  /* margin-top: 200px; */
  background:#818181;
  opacity: .5;
  padding:16px;
}
.detailsLoading .card-content {
  clear:both;
  box-sizing: border-box;
  padding:16px;
  background:transparent;
  /* width: 45%; */
  /* margin: auto; */
}
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}


/* headerInfo PropertyUser */

.headerInfo.box{
  padding: 150px 100px;
  direction: ltr;
  display: flex;
  justify-content: end;
  /* max-width: 300px;
  width: 100%;
  padding: 0 15px; */
}
.headerInfo .skeleton {
  padding:15px;
  max-width: 300px;
  width: 100%;
  /* background: #fff; */
  /* margin-bottom: 20px; */
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12); */
}
.headerInfo .skeleton .square {
  height: 80px;
  border-radius: 5px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
  background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
  background-size: 800px 100px;
  animation: wave-squares 2s infinite ease-out;
}
.headerInfo .skeleton .line {
  height: 12px;
  margin-bottom:6px;
  border-radius: 2px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
  background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.headerInfo .skeleton-right{
 flex:1;
}
.headerInfo .skeleton-left{
 flex:2;
 padding-right:15px;
}
.headerInfo .flex1{
 flex: 1;
}
.headerInfo .flex2{
 flex: 2;
}
.headerInfo .skeleton .line:last-child{
 margin-bottom: 0;
}
.headerInfo .h8{
 height: 8px !important;
}
.headerInfo .h10{
 height: 10px !important;
}
.headerInfo .h12{
 height: 12px !important;
}
.headerInfo .h15{
 height: 15px !important;
}
.headerInfo .h17{
 height: 17px !important;
}
.headerInfo .h20{
 height: 20px !important;
}
.headerInfo .h25{
 height: 25px !important;
}
.headerInfo .w25{
 width: 25% !important
}
.headerInfo .w40{
 width:40% !important;
}
.headerInfo .w50{
 width: 50% !important
}
.headerInfo .w75{
 width: 75% !important
}
.headerInfo .m10{
 margin-bottom: 10px !important;
}
.headerInfo .circle{
 border-radius: 50% !important;
  height: 6rem !important;
  width: 6rem;
}
@keyframes wave-lines {
 0% {
     background-position: -468px 0;
 }
  100% {
     background-position: 468px 0;
 }
}
@keyframes wave-squares {
 0% {
     background-position: -468px 0;
 }
  100% {
     background-position: 468px 0;
 }
}


.detailsLoading .line {
  display: inline-block;
  width: 35px;
  height: 35px;
  border-radius: 15px;
  background-color: var(--primaryColor)!important;
}

.detailsLoading .load-3 .line:nth-last-child(1) {
  animation: loadingC 1s 0.3s linear infinite;
}
.detailsLoading .load-3 .line:nth-last-child(2) {
  animation: loadingC 1s 0.6s linear infinite;
}
.detailsLoading .load-3 .line:nth-last-child(3) {
  animation: loadingC 1s 0.8s linear infinite;
}

@keyframes loadingC {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 45px);
  }
  100% {
    transform: translate(0, 0);
  }
}