.portrait-grid-container {
    text-align: center;
}

.portrait-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
}

.portrait-item {
    border: 1px solid #ddd;
    padding: 15px;
	width: auto !important;
	text-decoration: none;
	padding: 0px;
  border: none;
}

.portrait-image img{
  object-fit: cover;
}

.portrait-title{
	text-decoration: none;
	color: #262524;
	font-size: 17px;
}

.portrait-filter-bar {
    display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.portrait-filter-bar span{
	margin: 0px 20px 0px 0px !important;
	color: #4c4c4c;
}


.portrait-filter-bar-button {
  background-color: #f5f5f5;
  padding: 10px 20px;
  background: 0 0;
    background-color: rgba(0, 0, 0, 0);
  border: 1px solid #eee;
    border-left-width: 1px;
    border-left-style: solid;
  border-left: none;
  font-size: 15px;
  cursor: pointer;
}

.portrait-filter-bar-button-first {
  background-color: #f5f5f5;
	border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 10px 20px;
  background: 0 0;
    background-color: rgba(0, 0, 0, 0);
  border: 1px solid #eee;
    border-left-width: 1px;
    border-left-style: solid;
  font-size: 15px;
  cursor: pointer;
}

.portrait-filter-bar-button-last {
  background-color: #f5f5f5;
  padding: 10px 20px;
  background: 0 0;
    background-color: rgba(0, 0, 0, 0);
  border: 1px solid #eee;
    border-right-width: 1px;
    border-right-style: solid;
  font-size: 15px;
  cursor: pointer;
}

.toggle-media-filter{
	    color: #f5f5f5;
  background-color: #E95740;
  padding: 10px 20px;
		border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #eee;
  font-size: 15px;
  cursor: pointer;
}

.load-more-portraits{
border-color: rgba(241,83,48,0.9);
  font-size: 16px;
  background-color: rgba(241,83,48,0.9);
	border-radius: 5px;
  padding: 10px 20px;
margin-top: 40px;
  border: 1px solid #eee;
  cursor: pointer;
	color: white;
	  margin-top: 60px;
}


.apply-media-filter{
border-color: rgba(241,83,48,0.9);
  font-size: 16px;
  background-color: rgba(241,83,48,0.9);
	border-radius: 5px;
  padding: 10px 20px;
  border: 1px solid #eee;
  cursor: pointer;
	color: white;
}

.media-filter {
    margin-bottom: 20px;
    padding: 10px;
    background: #f9f9f9;
	 overflow-y: auto;
	margin-bottom: 20px;
}

.portrait-filter-bar button.tri-active {
    background-color: #007cba;
    color: #fff;
    border: 1px solid #005a87;
}

.media-filter-form{
	text-align: left !important;
  height: auto;
}

.portrait-grid.loading {
    opacity: 0.5;
    position: relative;
}

.portrait-grid.loading:after {
    content: 'Chargement...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: #333;
}

@media (max-width: 767px) { 

	.portrait-filter-bar{
		display: block;
	}
	
	.portrait-filter-bar span{
		width: 100%;
  display: block;
	}

	.toggle-media-filter{
border-radius: 4px !important;
}
	
	
	.portrait-filter-bar-button {
		width: 100% !important;
}

.portrait-filter-bar-button-first {
	width: 100% !important;
}

.portrait-filter-bar-button-last {
	width: 100% !important;
}

	.portrait-grid {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 20px;
}
	
	.portrait-filter-bar span{
font-size: 20px;
padding-bottom: 20px;
}
	
	.toggle-media-filter{
		width: 100%;
	}
	
	
	.portrait-filter-bar-button {

  border-left: 1px solid #eee;

	}
	
	.portrait-image img{
		width: 100%;
	}
}
.media-filter-label{
	white-space: nowrap;
}