body,header,html{
    /*background-color: #0a0a0a;*/
    background-color:#101010;
    animation: zoom 1s linear;
}
@keyframes zoom{
    0%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1.8,1.8);
    }
    100%{
        transform: scale(1.1);
    }
}
body.zoom{
    transform: scale(3,3);
    transition: all 1s ease-in-out;
    opacity: 0;
}
#cambio{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 20;
    pointer-events: none;
}
#cambio.togli{
    opacity: 0;
    transition-delay: 0.5s;
}
header{
    background-image: none;
}
.big-title h2{
    font-size: 25vw;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    justify-content: center;
    padding-top: 80px;
}
.on{
    animation: on 0.5s ease-out infinite;
}
@keyframes on{
    0%{
        color: #DDFF91;
    }
    100%{
        color: #ffffff;
    }
}
.off{
    animation: off 0.5s ease-out infinite;
}
@keyframes off{
    0%{
        color: #ffffff;
    }
    100%{
        color: #DDFF91;
    }
}
.rowHeader{
    display: flex;
    text-align: center;
}
.wrapper-down{
    text-align: center;
    margin: 60px 0px 30px;
}
.arrowDown img{
    width: 35px;
    height: 35px;
}
.arrowDown{
    cursor: pointer; 
    animation: down 1s linear infinite;
}
@keyframes down{
    0%,100%{
        transform: translateY(8px);
    }
    50%{
        transform: translateY(-8px);
    }
}
#parallasse, #parallasseDue, #parallasseTre, #parallasseQuattro,#parallasseCinque, #parallasseSei{
    padding: 150px 0px;
    height: 100%;
}
.wrapper-parallasse{
    display: flex;
}
.wrapper-parallasse img{
    width: 100%;
    border-radius: 10px;
}
#parallasse .wrapper-foto.rellax:nth-of-type(1),#parallasseDue .wrapper-foto.rellax:nth-of-type(2), #parallasseCinque .wrapper-foto.rellax:nth-of-type(2){
    z-index: 10;
}
#ipad, #ipadDue, #ipadQuattro, #ipadCinque, #ipadSei{
    width: 320px;
    height: 400px;
}
#ipadTre{
    width: 250px;
    height: 330px;
}
.ipadP{
   position: relative;
   top: 50px;
}
.ipadpDue{
    position: relative;
    top: 100px;
}

.ipadpTre{
    position: relative;
    top: 100px;
}
#desktop, #desktopDue, #desktopCinque, #desktopSei{
    width: 810px;
    height: 450px;
}
#desktopTre{
    width: 610px;
    height: 350px;
}
#desktopQuattro{
    width: 660px;
    height: 410px;
}
.deskP{
    position: relative;
    right: 100px;
}
.deskpDue{
    position: relative;
    right: 100px;
}
.deskpTre{
    position: relative;
    left: 40px;
}
#iphone, #iphoneDue, #iphoneTre, #iphoneQuattro, #iphoneCinque, #iphoneSei{
    width: 155px;
    height: 270px;
}
.iphoneP, .iphonepQuattro{
  position: relative;
  top: 150px;
  right: 150px;
}
.iphonepDue{
    position: relative;
    top: 200px;
    right: 50px;
}
.iphonepTre{
    position: relative;
    left: 120px;
    top: 100px;
}






@media (max-width:767px){
    #parallasseQuattro{
        padding: 0px;
    }
    .rowHeader{
        display: block;
        padding-top: 25px;
    }
    .rowHeader article.col-50{
        width: 100%;
    }
    .wrapper-testi{
        margin-bottom: 30px;
    }
    .wrapper-down{
        margin: 40px 0px 30px;
    }
    .wrapper-parallasse{
        flex-wrap: wrap;
    }
    .wrapper-foto.rellax{
        width: 33%;
    }
    #gruppo{
        overflow: hidden;
    }
    
    img#iphone, img#ipad, img#desktop, img#iphoneSei, img#ipadSei, img#desktopSei{
    right: auto;
}
    #desktop, #desktopDue, #desktopTre, #desktopQuattro, #desktopCinque, #desktopSei{
        width: 310px;
        height: 170px;
    }
    #ipad, #ipadDue, #ipadTre, #ipadQuattro, #ipadCinque, #ipadSei{
        width: 150px;
        height: 200px;
    }
    #iphone, #iphoneDue, #iphoneTre, #iphoneQuattro, #iphoneCinque, #iphoneSei{
        width: 100px;
        height: 180px;
    }
    #parallasse .wrapper-foto.rellax:last-of-type, #parallasseDue .wrapper-foto.rellax, #parallasseCinque .wrapper-foto.rellax, #parallasseSei .wrapper-foto.rellax:last-of-type{
    text-align: right;
    }
    img#desktop, img#desktopSei{
    transform: translatex(-50px);
    bottom: 50px;
    right: 25px;
    }
    .deskpDue{
        right: auto;
        left: -30%;
        transform: translateX(-50%);
        bottom: 50px;
    }
    .dpCinque{
        bottom: 150px;
    }
    .ipadpCinque{
        top: auto;
        bottom:50px;
    }
    .ihpCinque{
        top: auto;
        left:120px;
    }
    .iphonepDue{
        right: auto;
    }
    #parallasseTre .wrapper-foto.rellax, #parallasseQuattro .wrapper-foto.rellax{
        width: 100%;
        text-align: center;
    }
    .ipadpTre, .iphonepTre, .deskpTre, .iphonepQuattro{
        top: auto;
        left: auto;
    }
    .iphonepQuattro{
        right: auto;
    }
    
    
} 

@media (min-width:992px) and (max-width:1199px){
    nav{
        position: absolute;
    }
    .container{
        width: auto;
        padding: 0px 20px;
    }
    #gruppo{
        overflow: hidden;
    }    
    #ipad, #ipadDue, #ipadTre, #ipadQuattro, #ipadCinque, #ipadSei{
        width: 250px;
        height: 330px;
    }
    .iphoneP{
        right: 230px;
    }
    .deskP{
        right: 150px;
    }
    .deskpDue{
        right: 235px;
    }
    .ipadpDue{
        top: auto;
        bottom: 60px;
    }
    .iphonepDue{
        top: 260px;
    }
    .iphonepTre, .iphonepQuattro{
        left: auto;
    }
    .deskpTre {
        left: 30px;
    }
}

@media (min-width:768px) and (max-width:991px){
    nav{
        position: absolute;
    }
    .container{
        width: auto;
        padding: 0 20px;
    }
    .rowHeader{
        display: block;
        padding-top: 80px;
    }
    .rowHeader article.col-50{
        width: 100%;
    }
    .wrapper-testi{
        margin-bottom: 60px;
    }
    #gruppo{
       overflow: hidden;
    }
    #desktop, #desktopDue, #desktopTre, #desktopQuattro, #desktopCinque, #desktopSei {
        width: 600px;
        height: 310px;
    }
    .deskP{
        right: 130px;
    }
    #ipad, #ipadDue, #ipadTre, #ipadQuattro, #ipadCinque, #ipadSei{
        width: 220px;
        height: 300px;
    }
    #iphone, #iphoneDue, #iphoneTre, #iphoneQuattro, #iphoneCinque, #iphoneSei{
        width: 130px;
        height: 230px;
    }
    .iphoneP{
        right: 240px;
    }
    .deskpDue{
        right: 235px;
    }
    .deskpTre{
        right: 100px;
        left: auto;
    }
    .iphonepTre, .iphonepQuattro{
        left: auto;
        right: 300px;
        top: 180px;
    }
}