* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  margin-top: 10px;
}

/* # Card Noticias com Imagens */
/*=============================*/
.card-noticia {
  display: -webkit-box;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
	background: #32325D;
  overflow: hidden;
  will-change: box-shadow;
 
  
  transition: box-shadow .3s ease;
}

.card_md {
  max-width: 380px;

}

.card-noticia:hover {
  box-shadow: var(--shadow-hover);
}

.card-noticia:hover .info {
  bottom: 0;
  background:#23233A;
	color: white;

	margin-top: 10px;
	margin-bottom: -60px;
}

.card-noticia:hover .data {
  background: transparent;
  color: #333;
  will-change: background, color;
  -webkit-transform: background .6s, color .3s ease-in-out;
          transform: background .6s, color .3s ease-in-out;
}

.card-noticia .data {
  display: -webkit-box;
  display: flex;
  position: absolute;
  height: 60px;
  width: 60px;
  top: 5px;
  right: 5px;
  padding: 0 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  z-index: 11;
}

.data_day {
  display: -webkit-box;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
          justify-content: center;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  padding: 5px 0 0;
}

.data_moth {
  font-size: 11px;
  text-align: center;
  line-height: .85em;
}

.card-noticia .wrap-img {
  display: -webkit-box;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-box-pack: center;
          justify-content: center;
}

.card-noticia .wrap-img img {
  height: 250px;
  width: auto;
}

.card-noticia .info {
  display: -webkit-box;
  display: flex;
  position: absolute;
  height: 250px;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  bottom: -200px;
  left: 0;
  background: #23233A;
  will-change: bottom;
  -webkit-transition: bottom .3s ease;
  transition: bottom .3s ease;
  z-index: 10;
	color: white;
	
}

.card-noticia .info .title {
  display: -webkit-box;
  display: flex;
  min-height: 50px;
  width: 100%;
  -webkit-box-align: center;
          align-items: center;
  padding: 0 20px 0 10px;
}

.card-noticia .info .title .icon {
  display: -webkit-box;
  display: flex;
  position: relative;
  height: 100%;
  width: 50px;
  min-width: 50px;
  color: var(--color-primary);
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

.card-noticia .info .title .icon::before {
  position: absolute;
  content: '';
  width: 2px;
  height: 40px;
  right: 5px;
  border-right: 1px solid #e3e3e3;
  opacity: .8;
}

.card-noticia .info .title h4 {
  font-size: 18px;
  font-weight: 400;
  font-family: Helvetica;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
}

.card-noticia .info .description {
  display: -webkit-box;
  display: flex;
  height: 100px;
  width: 100%;
  -webkit-box-pack: end;
          justify-content: flex-end;
  padding: 10px;
}

.card-noticia .info .description p {
  position: relative;
  width: 85%;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

.card-noticia .info .description p::before {
  position: absolute;
  content: '';
  width: 2px;
  height: 80px;
  border-left: 1px solid #eee;
  left: -7px;
}

.card-noticia .info .action {
  height: 50px;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: end;
          justify-content: flex-end;
  position: absolute;
  bottom: -5px;
}

.card-noticia .info .action .btn-noticias {
  border: none;
  border-radius: 0;
  background: transparent;
  font-weight: 500;
  font-size: 16px;
  font-family: Helvetica;
  height: 50px;
  width: 100%;
  color: #333;
  cursor: pointer;
  opacity: .8;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  will-change: opacity, background;
  -webkit-transition: opacity, background .3s ease;
  transition: opacity, background .3s ease;
}

.card-noticia .info .action .btn-noticias:hover {
  background: var(--color-primary);
  color: #fff;
  opacity: 1;
}