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

/* Base styles */
.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: 450px) {
    #timeline[data-columns]::before {
        content: '1 .column';
    }
	 .column{float:none;width:100%; text-align:center;}
	 .item{margin:30px auto;}
	 .logo img{width:120px;}
	 
	 .header-btn{float:right; background:#22c064;  border:1px solid #22c064; font-size:10px!important; line-height:26px; height:30px!important; }
	 .hover{    transition: all 0s ease-out;}
	.item:hover .hover{ display:none;	}

	 
}

@media screen and (min-width: 451px) and (max-width: 700px) {
    #timeline[data-columns]::before {
        content: '2 .column.size-1of2';
    }
	.wrapper{max-width:440px}
	 body{background-size:auto; background-position:center top;}
	 
}

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

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