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

      
		
        .intro-text {
            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 auto;
            width: calc(33% - 7px);
            margin: 5px;
			min-height:300px;
        }
    
        .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 {
			flex:1;
            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;
            flex-wrap: wrap;
        }
        
        .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: 605px;
            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';
        }

        @media screen and (max-width:1200px) {

        }

        @media screen and (max-width:990px) {
            .project {
                width: calc(33% - 9px)
            }
        }

        @media screen and (max-width:650px) {
            .project {
                width: calc(50% - 11px)
            }
        }
        
        @media screen and (max-width:450px) {
            .project {
                width: 100%;
            }
        }