/* Center website */
.tagged-portfolio .main {
    max-width: 100%;
}

.tagged-portfolio br {
    display: none;
}

.tagged-portfolio h1 {
    font-size: 50px;
    word-break: break-all;
}

.tagged-portfolio .rowframe
{
	display: block;
	margin-left: -10px;
	margin-right: 10px;
}

.tagged-portfolio .row 
{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    justify-content: center;
}

/* Add padding BETWEEN each column */
.tagged-portfolio .row,
.tagged-portfolio .row > .column {
    /* padding: 8px; */
}

/* Create three equal columns that floats next to each other */
.tagged-portfolio .column 
{
    -webkit-flex: 1 auto;
    flex: 1;
    min-width: 250px;

    width: 25%;	
}

/* Content */
.tagged-portfolio .content {
    background-color: white;
    padding: 10px;
}

.tagged-portfolio .hide
{
	/* 	display: none; */
	animation-name: column-fadeout;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	
	-webkit-animation-name: column-fadeout; /* Safari & Chrome */
	-webkit-animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	
	-moz-animation-name: column-fadeout; /* Firefox */
	-moz-animation-duration: 0.5s;
	-moz-animation-fill-mode: forwards;
	
	-ms-animation-name: column-fadeout; /* Internet Explorer */
	-ms-animation-duration: 0.5s;
	-ms-animation-fill-mode: forwards;
	
	-o-animation-name: column-fadeout; /* Opera */
	-o-animation-duration: 0.5s;
	-o-animation-fill-mode: forwards;
}

/* The "show" class is added to the filtered elements */
.tagged-portfolio .show 
{
	/* 	display: block; */
	animation-name: column-fadein;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;

	-webkit-animation-name: column-fadein; /* Safari & Chrome */
	-webkit-animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	
	-moz-animation-name: column-fadein; /* Firefox */
	-moz-animation-duration: 0.5s;
	-moz-animation-fill-mode: forwards;
	
	-ms-animation-name: column-fadein; /* Internet Explorer */
	-ms-animation-duration: 0.5s;
	-ms-animation-fill-mode: forwards;
	
	-o-animation-name: column-fadein; /* Opera */
	-o-animation-duration: 0.5s;
	-o-animation-fill-mode: forwards;
}

/* column animation */
@keyframes column-fadeout 
{
	from 
	{
		opacity: 1.0;
		transform: scale(1.25);
	}
	to 
	{
		opacity: 0.0;
		transform: scale(0);
	}
}

@keyframes column-fadein
{
	from 
	{
		opacity: 0;
		transform: scale(0);
	}
	to 
	{
		opacity: 1.0;
		transform: scale(1);
	}
}


/* Style the buttons */
.tagged-portfolio .btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.tagged-portfolio .btn:hover {
  background-color: #ddd;
}

.tagged-portfolio .btn.active {
  background-color: #666;
  color: white;
}