/* General Formatting */
		
.id7-page-title {
    display:none;
}



  
.intro-text h2{
    text-align:center;
}

.mixitup-container  {
    display:flex;
    flex-wrap:wrap;
}

.project {
    display:flex;
    flex-wrap: wrap;
    padding:10px;
    background: #D0EDFF;
    border-radius: 5px;
    margin: 5px;
    flex: 0 1 calc(33% - 7px);
    margin: 5px;
}

.controls {
    padding: 1rem;
    background: #333;
    font-size: 0.1px;
}

.control, .control-2, .control-3, .control-4 {
    display: flex;
    margin: 5px;
    padding: 5px;
    width: 100px;
    height: 25px;
    background: #444;
    cursor: pointer;
    font-size: 10px;
    color: white;
    transition: background 150ms;
}

.control:hover {
    background: #3f3f3f;
}


.mixitup-control-active {
    background: #393939;
}

.mixitup-control-active[data-toggle],
.mixitup-control-active[data-filter],
.mixitup-control-active[data-sort] {
    background: lightgray;
}

.mixitup-control-active[background-reset] {
    background:unset;
}

.filter-controls {
    display:flex;
}


.project .title {
    padding-bottom: 5px;
    border-bottom: solid 1px;
    text-align: center;
}

.project .title a {
    text-decoration: none;
}

.project .name,
.project .department,
.project .date {
    font-size:14px;
    flex: 1 100%;
    margin: 5px 0;
}

.project .tags {
    background:lightgray;
    margin: -5px -10px -10px -10px;
    padding: 5px;
    font-size:12px;
    flex: 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.name span, .department span, .date span {
    font-weight: bold;
    margin-right:5px;
}

.tags span {
    font-weight: bold;
    margin-right:5px;
}

.filter-controls-container {
    display:flex;
}

.departments-child { 
    padding:5px 0;
}

.control.departments,
.control-2.year,
.control-3.category,
.control-4.date {
    height: auto;
    display: block;
    position: relative;
    padding-bottom: 0px;
}

.departments::after,
.year::after,
.category::after,
.date::after{
    content:attr(arrow);
    position:absolute;
    right:5px;
    top:0px;
    font-size:15px;
    color:white;
    padding:0;
    margin:0;
    transition: 300ms ease-in-out;
}

.departments.arrow::after,
.year.arrow::after,
.category.arrow::after,
.date.arrow::after {
    transform:rotate(90deg);
}   

.button {
    margin: -5px;
    padding: 5px;
    position: relative;
    z-index: 1;
    transition: 100ms ease-in-out;
}

.button-2, .button-3, .button-4 {
    margin: -5px -5px 0 -5px;
    padding: 5px;
    position: relative;
    z-index: 1;
    transition: 100ms ease-in-out;
}

.all-button {
    transition: 100ms ease-in-out;
}

.all-button:hover {
    background: rgba(33, 33, 33, 0.3);
}
.button:hover, 
.button-2:hover,
.button-3:hover {
    background: rgba(225, 232, 234, 0.3);   
}

.departments .dropdown-navigation-1 {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    background: rgb(68, 68, 68);
    margin-top: 10px;
}

.col-1, .col-2, .col-3 {
    width:180px;
}

.col-1 .departments-child,
.year-child,
.category-child,
.date-child {
    margin: 0px 0px 0 -5px;
    padding: 5px;
}

.col-2 .departments-child,
.col-3 .departments-child {
    padding: 5px;
}

/* Data sorting CSS */
.sorting-control {
    display: flex;
    margin: 5px;
    padding: 5px;
    height: 25px;
    background: #444;
    cursor: pointer;
    font-size: 10px;
    color: white;
    transition: background 150ms; 
}

.sorting-control[data-sort] {
    position:relative;
}
.sorting-control[data-sort]::after {
    content: 'Oldest first';
    position: absolute;
    width: 55px;
    height: 18px;
    top: calc(50% - 9px);
    left: calc(50% - 28px);
}

.sorting-control[data-sort$='desc']::after {
    content: 'Newest first';
}