body {
    font-family: "Poppins", sans-serif;
    background-image: url('images/background.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
}

/* 3. Portfolio styles
-----------------------------------------*/
#portfolio-content {
    margin: 0 auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
#portfolio-content img {
    width: 250px;
    height: 400px;
    object-fit: cover;
}
.portfolio-group {
    display: inline-block;
    width: 250px;
    height: 400px;
    position: relative;
    margin: 15px 10px;
    border-radius: 1rem;
}
.portfolio-group img {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    border-radius: 1rem;
}
.portfolio-group .detail {
    border-radius: 1rem;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1.5rem;
}
.portfolio-group .detail h3 {
    text-align: center;
    padding: 15px 10px 0 10px;
}
.portfolio-group .detail p {
    position: relative;
    line-height: 1.2em;
    text-align: justify;
    overflow: hidden;
    height: 190px;
    text-overflow: ellipsis;
}
.portfolio-item {
    display: block;
    width: 100%;
    height: 100%;
}

.portfolio-item .buttons {
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    bottom: 1rem;
    display: flex;
    justify-content: space-around;
}

.portfolio-item .btn {
    text-wrap: nowrap;
    border: 1px solid rgba(0, 0, 0, 0.09);
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44);
    -ms-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44);
    box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44);
}

.portfolio-item .btn:first-child {
    margin-right: 1rem;
}

.portfolio-item .btn:hover {
    background-color: #ddd;
}
.pagination {
    width: 100%;
}
.pagination li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: white;
    -webkit-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.4);
    -ms-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.4);
    box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.4);
    margin-right: 10px;
    border: 1px solid rgba(44, 44, 44, 0.1);
}
.pagination li:last-child {
    margin-right: 0;
}
.pagination li.active,
.pagination li:hover {
    background-color: #a7ddff;
}

/*  4. CSS3 flip
	http://stackoverflow.com/questions/13474210/css3-3d-flip-animation-ie10-transform-origin-preserve-3d-workaround
	http://www.cssplay.co.uk/menu/css3-3d-card.html
	http://cssdeck.com/labs/gddxuzki
-------------------------------------------------------------------------------------*/
.portfolio-group .portfolio-item img,
.portfolio-group .portfolio-item .detail {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.portfolio-group .detail {
    -moz-transform: perspective(800px) rotateY(180deg);
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
}
.portfolio-group img {
    -moz-transform: perspective(800px) rotateY(0deg);
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
}
.portfolio-item:hover > .detail {
    -moz-transform: perspective(800px) rotateY(0);
    -webkit-transform: perspective(800px) rotateY(0);
    transform: perspective(800px) rotateY(0);
}
.portfolio-item:hover > img {
    -webkit-transform: perspective(800px) rotateY(-179.9deg);
    -moz-transform: perspective(800px) rotateY(-179.9deg);
    transform: perspective(800px) rotateY(-179.9deg);
}
.portfolio-group img,
.portfolio-group .detail {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}