/*
.effettoentrata{
  animation: entrataeffetto 1s;
  width:100%;top:0px;left:0px;
  height:0vh;
  background:#fff;
  position:absolute;z-index:9999999999999;
}
 
@keyframes entrataeffetto {
  0% {
    height:0vh;z-index:9999999999999;
  }
  100% {
    height:100vh;z-index:9999999999999;
  }
}

.effettouscita{
  position:absolute;
  animation:uscitaeffetto 1s;
  width:100%;z-index:9999999999999;
  height:0vh;bottom:0px;left:0px;
  background:#fff;
}
 
@keyframes uscitaeffetto {
  0% {
    height:100vh;z-index:9999999999999;
  }
  100% {
    height:0vh;z-index:9999999999999;
  }
}


*/
.loaded{
  animation: scaleIn 0.7s ease-in;
}
 
@keyframes scaleIn {
  0% {
    opacity:0;
    transform: translatey(-5px);
  }
  100% {
    opacity:1;
    transform: translatey(0px);
  }
}


/* effetto solo opacità */


.target2 {
  opacity: 0.4;
    -webkit-transition: opacity 1s, transform 1s;
    -o-transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s;

}
.target2.onScreen {
	 -webkit-transition-delay: 0.5s; 
    transition-delay: 0.5s; 
    opacity: 1;

}

/* animazione testi */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* pulse */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}


/* fine animazione testi */



/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

.target {
   
    opacity: 1;
    -webkit-transition: opacity 0.5s, transform 0.5s;
    -o-transition: opacity 0.5s, transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;

}
.target.onScreen {
	 -webkit-transition-delay: 0.2s; 
    transition-delay: 0.2s; 
    opacity: 1;

}
.pos-box2.target4{   
    -webkit-transition:  transform 1s 1s;
    -o-transition: transform 1s 1s;
    transition: transform 1s 1s;
     transform: translate(0px, 5vh);
}  
.pos-box2.onScreen.target4{   
    -webkit-transition: transform 1.5s 1s;
    -o-transition: transform 1.5s 1s;
    transition:transform 1.5s 1s;
     transform: translate(0px, 15vh);
}   
  
.pos-box3.target4{   
    -webkit-transition:  transform 1s;
    -o-transition: transform 1s ;
    transition: transform 1s ;
     transform: translate(0px, 5vh);
}  
.pos-box3.onScreen.target4{   
    -webkit-transition: transform 1s;
    -o-transition: transform 1s ;
    transition:transform 1s ;
     transform: translate(0px, -10vh);
}   
  
.pos-box4.target4{   
  z-index:999;position:relative;
    -webkit-transition:  transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
     transform: translate(0px, 50vh);
}  
.pos-box4.onScreen.target4{   
    -webkit-transition: transform 1.5s;
    -o-transition: transform 1.5s;
    transition:transform 1.5s ;
     transform: translate(0px, 50vh);
}   
  
.pos-box5.target4{   
    -webkit-transition:  transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
     transform: translate(0px, 10vh);
}  
.pos-box5.onScreen.target4{   
    -webkit-transition: transform 1.5s;
    -o-transition: transform 1.5s;
    transition:transform 1.5s ;
     transform: translate(0px, 25vh);
}   
  
.animazionemovimentosfondo{animation: animatedBackground 50s linear 2 alternate-reverse;}
  
@keyframes animatedBackground {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}
/* animazione box */
  
  .target3.pos-box2{top:5vh;opacity:1;
    -webkit-transition: opacity 1s, transform 1s;
    -o-transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s;}
  .target3.onScreen.pos-box2{top:50vh;}
  
.target3.box-testo{padding:30px; opacity: 1;
    -webkit-transition: opacity 1s, transform 1s;
    -o-transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s;}
  
.target3.onScreen.box-testo{	 
    -webkit-transition-delay: 1s; 
    transition-delay: 1s; 
    opacity: 1;} 
  
.target3.box-testo:before{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0;
  height: 0;
  background: transparent;
  border: 3px solid transparent; 
}
.target3.onScreen.box-testo:before{
  animation: animate 0.5s 1.1s linear forwards;
  
}
@keyframes animate{
  0%{
    width: 0;
    height: 0;
    border-top-color: #000000;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
  }
  50%{
    width: 100%;
    height: 0;
    border-top-color: #000000;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color:#000000;
  }
  100%{
    width: 100%;
    height: 100%;
    border-top-color:#000000;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: #262626;
  }
}

.target3.box-testo:after{
  content: '';
  position: absolute;
  top:0px;
  left:0px;
  width: 0;
  height: 0;
  background: transparent;
  border: 3px solid transparent;
}
.target3.onScreen.box-testo:after{
  animation: animate2 0.5s 1.4s linear forwards;
 
}
@keyframes animate2{
  0%{
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #262626;
    border-right-color: transparent;
  }
  50%{
    width: 0;
    height: 100%;
    border-top-color: transparent;
    border-bottom-color: #262626;
    border-left-color: #262626;
    border-right-color: transparent;
  }
  100%{
    width: 100%;
    height: 100%;
    border-top-color: transparent;
    border-bottom-color: #262626;
    border-left-color: #262626;
    border-right-color: transparent;
  }
}
  /* animazione box */
 
}

@media only screen and (min-width : 375px) {
}
    /* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {


}

@media only screen and (min-width : 768px){
  .animazionemovimentosfondo{animation: animatedBackground 10s linear 2 alternate-reverse;}
  .target {
   opacity: 0;
    -webkit-transition: opacity 0.5s, transform 0.5s;
    -o-transition: opacity 0.5s, transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;

}
.target.onScreen {
	 -webkit-transition-delay: 0.2s; 
    transition-delay: 0.2s; 
    opacity: 1;

}
  
  .pos-box2.target4{   
    -webkit-transition:  transform 1s 1s;
    -o-transition: transform 1s 1s;
    transition: transform 1s 1s;
     transform: translate(0px, -10vh);
}  
.pos-box2.onScreen.target4{   
    -webkit-transition: transform 1.5s 1s;
    -o-transition: transform 1.5s 1s;
    transition:transform 1.5s 1s;
     transform: translate(0px, 25vh);
}  
  
.target3.box-testo{padding:30px; opacity: 1;
    -webkit-transition: opacity 1s, transform 1s;
    -o-transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s;}
  
.target3.onScreen.box-testo{	 
    -webkit-transition-delay: 1s; 
    transition-delay: 1s; 
    opacity: 1;} 
  
 .pos-box3.target4{   
    -webkit-transition:  transform 1s;
    -o-transition: transform 1s ;
    transition: transform 1s ;
     transform: translate(0px, 20vh);
}  
.pos-box3.onScreen.target4{   
    -webkit-transition: transform 1s;
    -o-transition: transform 1s ;
    transition:transform 1s ;
     transform: translate(0px, -15vh);
} 
  .pos-box4.target4{   
  z-index:999;position:relative;
    -webkit-transition:  transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
     transform: translate(0px, 40vh);
}  
.pos-box4.onScreen.target4{   
    -webkit-transition: transform 1.5s;
    -o-transition: transform 1.5s;
    transition:transform 1.5s ;
     transform: translate(0px, 60vh);
}   
  
  .pos-box5.target4{   
    -webkit-transition:  transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
     transform: translate(0px, -5vh);
}  
.pos-box5.onScreen.target4{   
    -webkit-transition: transform 1.5s;
    -o-transition: transform 1.5s;
    transition:transform 1.5s ;
     transform: translate(0px, 20vh);
}   

  
  
}   

    /* Medium Devices, Desktops  md */
 @media only screen and (min-width : 992px) {
   .target3.box-testo{padding:50px;}
   .col-sm-offset-4.col-md-offset-4-mio{margin-left:40%!important;}
 }

    /* Large Devices, Wide Screens lg */
@media only screen and (min-width : 1200px) {
  .col-sm-offset-4.col-md-offset-4-mio{margin-left:41.666667%;}
 }