@import url("http://fonts.cdnfonts.com/css/playfair-display");
@import url("http://fonts.cdnfonts.com/css/futura-pt");
.nile-navy { background-color: #15456d !important; border-color: #15456d !important; }

.nile-text-navy { color: #15456d !important; }

.nile-check { color: #15456d; }

body { width: 100%; height: 100vh; margin: 0; padding: 0; }

main > div { height: 10rem; margin: 2rem; border-radius: 8px; overflow: hidden; }

h1, h2, h3, h4, h5, h6 { color: gray; font-family: 'Futura PT', sans-serif; }

p { font-family: 'Playfair Display', sans-serif; }

.navigation { font-family: 'Futura PT', sans-serif; }

.btn { font-family: 'Futura PT', sans-serif; }

.wrapper { margin: 10vh; }

.card { border: none; transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); overflow: hidden; border-radius: 20px; min-height: 450px; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2); }

@media (max-width: 768px) { .card { min-height: 350px; } }

@media (max-width: 420px) { .card { min-height: 300px; } }

.card.card-has-bg { transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); background-size: auto 120%; background-repeat: no-repeat; background-position: center center; }

.card.card-has-bg:before { content: ''; position: absolute; height: 100%; top: 0; right: 0; bottom: 0; left: 0; background: inherit; -webkit-filter: grayscale(1); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }

.card.card-has-bg:hover { transform: scale(0.98); box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3); background-size: auto 130%; transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); }

.card.card-has-bg:hover .card-img-overlay { overflow: hidden !important; transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); background: #234f6d; background: linear-gradient(0deg, rgba(21, 69, 109, 0.5) 0%, #257994 100%); }

.card .card-footer { background: none; border-top: none; }

.card .card-footer .media img { border: solid 3px rgba(255, 255, 255, 0.3); }

.card .card-meta { color: #26BD75; }

.card .card-body { transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); }

.card:hover { cursor: pointer; transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); }

.card:hover .card-body { margin-top: 30px; transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); }

.card .card-img-overlay { transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); background: #234f6d; background: linear-gradient(0deg, rgba(35, 79, 109, 0.378589) 0%, #455f71 100%); }

.portfolio #portfolio-flters { list-style: none; margin-bottom: 20px; }

.portfolio #portfolio-flters li { cursor: pointer; display: inline-block; margin: 10px 5px; font-size: 15px; font-weight: 500; line-height: 1; color: #444444; transition: all 0.3s; padding: 8px 20px; border-radius: 50px; }

.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { background: #15456d; color: #fff; }

.portfolio .portfolio-item { margin-bottom: 30px; }

.portfolio .portfolio-item .portfolio-img { overflow: hidden; }

.portfolio .portfolio-item .portfolio-img img { transition: all 0.6s; }

.portfolio .portfolio-item .portfolio-info { opacity: 0; position: absolute; left: 15px; bottom: 0; z-index: 3; right: 15px; transition: all 0.3s; background: #15456d; padding: 10px 15px; }

.portfolio .portfolio-item .portfolio-info h4 { font-size: 15px; color: #fff; font-weight: 500; color: #fff; margin-bottom: 0px; }

.portfolio .portfolio-item .portfolio-info p { color: #f9fcfe; font-size: 14px; margin-bottom: 0; }

.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link { position: absolute; right: 40px; font-size: 24px; top: calc(50% - 18px); color: #fff; transition: 0.3s; }

.portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover { color: #15456d; }

.portfolio .portfolio-item .portfolio-info .details-link { right: 10px; }

.portfolio .portfolio-item:hover .portfolio-img img { transform: scale(1.15); }

.portfolio .portfolio-item:hover .portfolio-info { opacity: 1; }

/*# sourceMappingURL=styles.css.map */