* {
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  margin: 5px;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn-top {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn-top:hover {
  background-color: #ddd;
}

.btn-top.active {
  background-color: #666;
  color: white;
}
/* card behavior css */
.card{
	height: 60%;
	width: 16rem;
	margin-left: 10px;
	object-fit: contain;
}

.card-body .card-text{
	text-align: justify;
	size: 8px;
}

.content-img{
	height: 180px;
	margin: auto;
	position: center;
}

.embed-responsive .img-fluid{
	width: 100%;
	height: 100%;
	margin: auto;
	position: center;
	object-fit: cover;
}

.contentLogo{
  width: 90%;
  height: 30%;
  float: center;
	object-fit: cover;
}

.card-img-top{
	height: 40vh;
	width: 100%;
	margin: auto;
	object-fit: cover;
}

.row .card:hover{
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
	transform: scale(1.05);
}

.row .card .card-img-top:hover{
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
	transform: scale(1.02);
}

.embed-responsive img{
	transition: transform .5s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
/* modal behavior */
.card{
	width: 320px;
	object-fit: contain;
}
.embed-responsive .modal-content{
	height: 110vh;
	width: 100%;
	object-fit: cover;
	border: none;
}

.embed-responsive .img-fluid{
	height: 40vh;
	width: 100%;
	-webkit-transition: 0.5s ease;
	transition: 0.5s ease;
	zoom: none;
}

.embed-responsive .img-fluid:hover{
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	overflow: visible;
}
/* end of card behavior css */