/*
   Spezific styling for salvattore
   Feel free to edit it as you like
   More info at http://salvattore.com
 */

/* Base styles */
.column {
    float: left;
}
#BOXES .size-1of4 {
    width: 33.33%;
    padding: 0px 4px;
}
#BOXES .size-1of3 {
    width: 50%;
	padding: 0px 4px;
}
#BOXES .size-1of2 {
    width: 100%;
}

/* Be sure to hide the element containing the configuration */
[data-columns]::before {
    visibility: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Configurate salvattore with media queries */
@media screen and (max-width: 900px) {
    #timeline[data-columns]::before {
        content: '1 .column';
    }
}

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

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

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