.card {
  position: relative;
  align-items: center;
  justify-content: center;
  height: 30em;
  border-radius: 10px;
  background-color: rgba(82, 98, 80, 0.85) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  margin-bottom: 2em;
}
.card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card:hover img {
  transform: scale(1.25);
}
.card:hover .cardcaption {
  bottom: 0;
}
.card h1 {
  position: absolute;
  top: 50px;
  left: 20px;
  margin: 0;
  padding: 0;
  color: white;
  font-size: 60px;
  font-weight: 100;
  line-height: 1;
  z-index:2;
}
.card img {
  height: 100%;
  transition: 0.25s;
  width: 100%;
  object-fit: cover;
}
.card .cardcaption {
  position: absolute;
  bottom: -200%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 5%;
  background-color: rgba(82, 98, 80, 0.90);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  color: white;
  line-height: 1;
  transition: 0.5s;
  z-index:2;
  height: 20em;
}

.card h2{
	position: absolute;
	top: 0;
	color: #fff;
	font-weight: 100;
	font-size: 2em;	
}

.card .cardcaption h3 {
  margin: 0 0 20px;
  padding: 0;
}
.card .cardcaption p {
  font-size: 14px;
  line-height: 1.75;
}
.card .cardcaption button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0;
  padding: 10px 30px;
  background-color: #1abc9c;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  width: 100%;
}

.centered {
    padding: 1em;
}

.card .card-action span{
	color: #ffab40;
	margin-right: 24px;
	transition: color .3s ease;
	text-transform: uppercase;
}

.card.small{
	height: 21% !important;
	margin: 2% 0 0 2% !important;
	width: 45% !important;
}

.card .card-image .card-title{
	color: #fff;
	top:0;
	right:0;
	padding: 10px !important;
	left: unset !important;
	bottom: unset !important;
}

.card .card-image .card-subtitle{
	position: absolute;
	color: #fff;
	padding: 5px;
	bottom: 0;
}

.card .card-image img{
	height:100%;
}

.card .card-title{
	font-weight: unset !important;
}

#ownBlock{
	height: 15%;
}

#ownBlock #own{
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	overflow-y: hidden;
	padding: 15px;
}

#ownBlock #own img{
   	border-radius: 50%;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#ownBlock #own::-webkit-scrollbar {    
	display: none;
}

.own-cards{
	display: inline-flex;
}

#own .round-card{
	/*background: black;*/
	border-radius: 50%;
	/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);*/
	/*margin: 10px 15px 15px 10px;*/
	height: 70px;
	width: 70px;
	transform: scale(1);
	cursor: pointer;
	/*animation: pulse-black 10s infinite;*/
}

.round-card{
	background: rgba(82, 98, 80, 0.90);
}

.pulse {
  background: rgba(255, 105, 97, 1);
  box-shadow: 0 0 0 0 rgba(255, 105, 97, 1);
/*   animation: pulse-red 10s infinite; */
}

.card.horizontal{
	background-color: #fff !important;
	transition: unset;
}

.card.horizontal .card-image img{
	transform: unset;
}

.card-action button{
	margin-top: 2%;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.5);
    box-shadow: 0 0 0 0 rgba(255, 105, 97, 0.7);
  }
  
  70% {
    transform: scale(0.75);
    box-shadow: 0 0 0 10px rgba(255, 105, 97, 0);
  }
  
  100% {
    transform: scale(0.5);
    box-shadow: 0 0 0 0 rgba(255, 105, 97, 0);
  }
}

.card-text-no-image{
	color: #99ac98 !important;
}

@media screen and (max-width: 39em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 2em;
    }

    .card {
        display: flex;
        flex: 0 1 calc(50% - .5em);
        margin-bottom: 1em;
        height: 20em;
    }
    
    .card-message {
    	height: 27em;
    }

    /*.card .cardcaption {
      bottom: -113%;
    }*/
}

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        display: flex;
        flex: 0 1 calc(34% - .5em);
        margin-bottom: 1em;
        height: 25em;
    }
}

@media screen and (min-width: 52em) {
    .centered {
        /*max-width: 52em;*/
    }

    .card {
        flex: 0 1 calc(50% - 1em);
        margin-bottom: 2em;
        height: 30em;
    }
}

@media screen and (min-width: 60em) {
    .cards {
        margin-top: inherit;
    }

    .card {
        flex: 0 1 calc(33% - 1em);
        margin-bottom: 2em;
        height: 30em;
    }
}

@media screen and (min-width: 80em) {
    .cards {
        margin-top: inherit;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
        margin-bottom: 2em;
        height: 30em;
    }
}

@media screen and (min-width: 108em) {
    .cards {
        margin-top: inherit;
    }

    .card {
        flex: 0 1 calc(19% - 1em);
        margin-bottom: 2em;
        height: 30em;
    }
}