@import url('https://fonts.googleapis.com/css?family=Barlow|Barlow+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
body{
	padding-top: 100px;
	font-family: "Barlow";
}

.cc-floating{
	z-index: 9999999;
}

.navbar-brand{
	font-family: "Barlow Condensed";
	padding-left: 55px;
}
.navbar-dark{
	background: #007bff !important;
}

.nav-link{
	font-size: 18px;
	font-family: "Barlow";
}

.brand-left, .brand-right{
	height: 50px;
	fill:#fff;
	position: absolute;
	margin-left: -55px;
	margin-top: 2px;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}
.brand-right{
	fill: #35ce30;
	margin-top: 17px;
	margin-left: -38px;
	height: 20px;
	transform: rotate(90deg);
}
.brand-left{
	animation-name: unspin;
	animation-duration: 1000ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-out; 
}
.brand-right{
	animation-name: spin;
	animation-duration: 1000ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-out; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@keyframes unspin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    }
}

.alert{
	border-radius: 0px !important;
}

ion-icon{
	vertical-align: text-bottom;
	color:#007bff;
}

.card-columns-fluid {
	column-count: 4;
}
.card-columns .card{ 
	transition: all .2s ease-in; 
}
.card-columns .card:hover{ 
	transform: scale(1); 
}
.card-columns .card:active{ 
	transform: scale(0.93); 
}
.card-columns .card .text-white:hover, .card-columns .card .text-white:hover{
	transform: scale(0);
}

.card-footer .btn{
	margin-top: -6px !important;
}

.badge-fw{
	max-width: 100%;
}

.card-fixed{
	max-width: 900px;
	width: 300px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 3;
}

a.text-success:hover{
	color:#fff !important;
}

a.text-light:hover{
	color:#333 !important;
}

.filter-box{
	background: #272c30;
	margin-top: -18px;
	margin-bottom: 10px;
	display: none;
}
.filter-box .select2{
	margin-right: 10px;
}
.nav-link{
	transition: ease .2s;
}

#filter-btn > i{
	transition: ease-in .2s;
}
#filter-btn[aria-expanded="true"]{
	background: #007bff;
}
#filter-btn[aria-expanded="true"] > i{
	transform: rotateX(180deg);
}

footer{
	padding-top: 70px;
}

@media screen and (max-width:1265px){
	.card-columns-fluid {
	  column-count: 3;
	}
}
@media screen and (max-width:954px){
	.card-columns-fluid {
	  column-count: 2;
	}
	h1{
		font-size: 30px !important;
	}
}
@media screen and (max-width:780px){
	.image-single{
		min-height: 400px;
		margin-bottom: 15px;
	}
}
@media screen and (max-width:648px){
	.card-columns-fluid {
	  column-count: 1;
	}
}

body{
  background:#f2f2f2;
}
body, a, h1, h2, h3, h4, h5, h6, p{
  font-family:"FigTree", serif !important;
}
content > div{
  padding:0px 30px !important;
}
.navbar-dark{
  background:#222 !important;
}
.navbar-dark a{
	font-size:.9rem;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:1; 
}
.navbar-dark a.active{
  background:#555;
  margin:0px 15px;
  padding:7px 15px !important;
  border-radius:30px;
}
.navbar-dark svg{
  display:none;
}
.navbar-brand{
  padding-left:0px;
}
.btn-primary{
  background:#222;
  border:0px;
  border-radius:10px;
  padding:10px 15px;
}
.btn-success{
  background:#222;
  border:0px;
  border-radius:10px;
  padding:10px 15px;
}
input, textarea, select, .select2{
  border-radius:10px !important;
}
.select2{
 padding-left:15px !important; 
}
.card-header{
  background:white;
  border-bottom:0px;
  font-weight:bold;
  border-radius:0px !important;
  margin:12px 5px 0px 5px;
}
.card{
  border-radius:15px;
  border:0;
  margin-bottom:30px !important;
  overflow:hidden;
}
.alert{
  border-radius:30px !important;
}
footer{
  position:relative !important;
  opacity:.5;
}
.card-body img{
  height:150px;
  border-radius:15px !important;
  margin-bottom:15px !important;
}

/* Improve legibility for text areas on image-backed pages */
content .container,
content .row.justify-content-center > .col-auto.p-4,
content .row.justify-content-center > .col-md-3.p-4{
  background: rgba(255,255,255,0.90);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
}
content .container{
  padding:36px 26px;
}
content .container h1,
content .container h2,
content .container h3,
content .container h4,
content .container p{
  color:#1f1f1f;
}