@media only screen and (min-width: 1200px){
#img1{
margin-left: 6%;
width:100%;
}
#img2{
margin-left:-6%;
width:100%;
}
#img3{
margin: -8% 0 0 6%;
width:100%;
}
#img4{
margin: -3% 0 0 -6%;
width:90%;
}
#img5{
margin:-6% 0 0 6%;
width:101%;
}
#img6{
margin:-2% 0 0 -14%;
}
#img7{
margin:-2% 0 0 -27%;
width:90%;
}
#macchina1{
margin-left: 6%;
width:100%;
}
#macchina2{
margin-left:-6%;
width:100%;
}
#macchina3{
margin: -8% 0 0 6%;
width:100%;
}
#macchina4{
margin: -3% 0 0 -6%;
width:90%;
}
#macchina5{
margin:-122% 0 0 6%;
width:100%;
}
#macchina6{
margin:-11% 0 0 -14%;
}
#macchina7{
margin:-11% 0 0 -26%;
width:90%;
}
#macchina8{
margin:8% 0 0 6%;
}
}

@media only screen and (min-width: 1025px) and (max-width: 1199px){
#img1{
margin-left: 6%;
width:100%;
}
#img2{
margin-left:-6%;
width:100%;
}
#img3{
margin: -8% 0 0 6%;
width:100%;
}
#img4{
margin: -3% 0 0 -6%;
width:90%;
}
#img5{
margin:-18% 0 0 6%;
width:101%;
}
#img6{
margin:-10% 0 0 -14%;
}
#img7{
margin:-10% 0 0 -26%;
width:90%;
}
#macchina1{
margin-left: 6%;
width:100%;
}
#macchina2{
margin-left:-6%;
width:100%;
}
#macchina3{
margin: -8% 0 0 6%;
width:100%;
}
#macchina4{
margin: -3% 0 0 -6%;
width:90%;
}
#macchina5{
margin:-130% 0 0 6%;
width:100%;
}
#macchina6{
margin:-10% 0 0 -14%;
}
#macchina7{
margin:-10% 0 0 -26%;
width:90%;
}
#macchina8{
margin:8% 0 0 6%;
}
}
@media only screen and (min-width: 981px) and (max-width: 1024px){
#img1{
margin-left: 6%;
width:100%;
}
#img2{
margin-left:-6%;
width:100%;
}
#img3{
margin: -8% 0 0 6%;
width:100%;
}
#img4{
margin: -3% 0 0 -6%;
width:90%;
}
#img5{
margin:-18% 0 0 6%;
width:101%;
}
#img6{
margin:-10% 0 0 -13%;
}
#img7{
margin:-10% 0 0 -26%;
width:90%;
}
#macchina1{
margin-left: 6%;
width:100%;
}
#macchina2{
margin-left:-6%;
width:100%;
}
#macchina3{
margin: -8% 0 0 6%;
width:100%;
}
#macchina4{
margin: -3% 0 0 -6%;
width:90%;
}
#macchina5{
margin:-130% 0 0 6%;
width:101%;
}
#macchina6{
margin:-10% 0 0 -10%;
}
#macchina7{
margin:-10% 0 0 -23%;
width:90%;
}
#macchina8{
margin:8% 0 0 6%;
}

}
@media only screen and (min-width: 768px) and (max-width: 980px){
.masonry{
width:80%;
}
.masonrymacchine{
width:80%;
}
#img5{
margin-top:-10%;
}
#macchina5{
margin-top:-10%;
}
}
@media only screen and (min-width: 481px) and (max-width: 767px){
.masonry{
width:80%;
}
.masonrymacchine{
width:80%;
}
#img5{
margin-top:-10%;
}
#macchina5{
margin-top:-10%;
}
}

@media only screen and (min-width: 100px) and (max-width: 480px){
#img1{
margin: 0 auto 5%;
width:100%;
}
#img2{
margin:-6% auto 5%;
width:100%;
}
#img3{
margin:auto;
width:100%;
}
#img4{
margin: auto;
width:90%;
}
#img5{
margin:-23% auto 0;
width:101%;
}
#img6{
margin:-6% auto 0;
}
#img7{
margin:-6% auto 0;
width:90%;
}
#macchina1{
margin: -10% auto 5%;
width:100%;
}
#macchina2{
margin:-4% auto 5%;
width:100%;
}
#macchina3{
margin:auto;
width:100%;
}
#macchina4{
margin: auto;
width:90%;
}
#macchina5{
margin:-21% auto 0;
width:101%;
}
#macchina6{
margin:-4% auto 0;
}
#macchina7{
margin:-4% auto 0;
width:90%;
}
#macchina8{
margin:6% auto 0;
}
.slideshow{
max-width:100%;
}
}

.masonry {

}
.masonry:hover{

}
.masonrymacchine {

}
.masonrymacchine:hover{

}

/*bottone scroll*/
#freccia{
 bottom: 45px;
}
#scroller{
 bottom: 10px;
}

.view {
    width: 420px;
    height: 320px;
   margin:20px;
   border: 5px solid ;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff  no-repeat center center;
}



.ds-hover-1 {
    display: inline-block;
	position: relative;
	margin: 0px auto;
	overflow: hidden;
}
.ds-hover-1 img {
	display: block;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.ds-hover-1:hover img {
	opacity: 0.5;
}
.ds-hover-1::after {
	content: attr(ds-title);
	position: absolute;
	height: 100%;
	color: #fff;
    z-index: 1;
	top: 0;
        left:0;
	width: 90%;
	background: rgba(0,0,0,0.5);
	font-weight: 300;
	font-size: 35px;
        font-family:roboto;
        font-weight:bold;
        text-align:left;
        line-height:85%;
	padding: 10% 10%10% 12%;
	-webkit-transform: translateY(-140%);
	-moz-transform: translateY(-140%);
	transform: translateY(-140%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}
.ds-hover-1::before {
	content: attr(ds-desc);
	position: absolute;
	height: 100%;
	color: #fff;
	z-index: 1;
	top: 27%;
        left:0;
	width: initial;
	background: rgba(0,102,166,0.7);
	font-size: 16px;
	padding: 2% 5% 5% 5%;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}
.ds-hover-1:hover::after,
.ds-hover-1:hover::before {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);

}