#filter-grid {padding-top:0; background-color:#f5f5f5;}

.controls {
    position:relative;
    background-color: #FFF;
    text-align:center;
}

.controls:before {
    content: "";
    display: block;
    width: 1000%;
    background-color: #FFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50%;
    border-bottom: 1px solid #e9e9e9;
}


.card {
    background-color:#FFF;
    border:1px solid #e9e9e9;
    border-radius:8px;
    padding:35px;
    height:100%;
    width:100%;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: column;
    transition:.2s;
}

.card p {
    font-size: 1rem;
    line-height: 1.5em;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.card:hover {
}

.card h2 {
    font: 1.5rem 'Milo', sans-serif;
    margin-top:0;
}

.list {
	overflow-y: hidden;
	padding:0;
    margin: 10px -10px;
    justify-content: center;
	}

.list li {
	padding:10px;
	display: block;
    position: relative;
    margin-bottom:0;
}


.affiliations {
    margin-top:1.125rem;
}

.affiliation {
    display: inline-block;
    margin: .5rem .5rem 0 0;
    padding: 4px .7rem;
    background: #f4f4f4;
    border-radius: 999px;
    font-size: 1rem;
}


.radio + .radio, .checkbox + .checkbox {
    margin-top: inherit;
}

.radio-group {
    padding: 15px 0;
}
    
.radio {
    display: inline-block;
    margin: 6px 0px;
}


.radio input {visibility:hidden;}	

.radio label:hover {color:#00b388;}

.radio input[type=radio] + label {
    font-weight:bold;
    padding: 5px 15px;
    color:#54585a;
    background-color:#f5f5f5;
    border:1px solid #e9e9e9;
    border-radius:999px;
    transition:.2s;
} 

.radio input[type=radio] + label:hover {
    color:#00b388;
}



.radio input[type=radio]:checked + label {
    color: #FFF;
    background-color: #00b388;
}   
    
#filter-grid input[type="radio"] {margin-top:6px; margin-left:-20px !important}  




@media (min-width:768px){
    
.radio-group {
    padding: 0;
} 
    
.radio {
    display: inline-block;
    margin: 0 15px 0 0;
}
	
.radio label:hover {color:#00b388;}

.radio input[type=radio] + label {
    padding: 2rem 0;
    padding-bottom: calc(2rem - 5px);
    background-color: transparent;
    border:none;
    border-radius:0px;
    border-bottom:5px solid rgba(0, 0, 0, 0);
} 

.radio input[type=radio] + label:hover {
    color:#00b388;
}

.radio input[type=radio]:checked + label {
    color:#00b388;
    background:transparent;
    border-bottom:5px solid #00b388;
}   
    
#filter-grid input[type="radio"] {margin-top:6px; margin-left:-20px !important}  
}

.item {padding:15px}
.column {float: left;}
.size-1of4 {width: 25%;}
.size-1of3 {width: 33.333%;}
.size-1of2 {width: 50%;}

/* Configurate salvattore with media queries */

@media screen and (max-width: 767px) {
    #timeline[data-columns]::before {
        content: '1 .column';
    }
}


@media screen and (min-width: 768px) and (max-width: 989px) {
    #timeline[data-columns]::before {
        content: '2 .column.size-1of2';
    }
}


 @media screen and (min-width: 990px) and (max-width: 1399px) {
	 #timeline[data-columns]::before {
		 content: '3 .column.size-1of3';
	}
}

@media screen and (min-width: 1400px) {
    #timeline[data-columns]::before {
        content: '4 .column.size-1of4';
    }
}