$(document).ready(()=>{

  const monitoring = $('.monitoring')
  const smartwatch = monitoring.find('.smartwatch')
  const clouds = monitoring.find('.cloud')
  const content = smartwatch.find('.content')
  const firstChild = content.find('.cloud').first()
  
  const delay = 1200
  let timer = 0
  let cloudCount = 0
  
  const people   = monitoring.find('.people')
  const luca     = monitoring.find('.people.luca')
  const sarah    = monitoring.find('.people.sarah')
  const fabio    = monitoring.find('.people.fabio')
  const maria    = monitoring.find('.people.maria')
  const lucia    = monitoring.find('.people.lucia')
  const paolo    = monitoring.find('.people.paolo')
  
  luca.css({'top': '425px','left': '370px'}).fadeIn(400)
  sarah.css({'top': '415px','left': '390px'})
  maria.css({'top': '180px','left': '135px'})
  fabio.css({'top': '150px','left': '110px'})
  lucia.css({'top': '285px','left': '300px'})
  paolo.css({'top': '205px','left': '300px'}).fadeIn(700)
  
  setTimeout(()=>{
    paolo.animate({'top': '260px','left': '395px'},2000)
  }, delay) 
  
  setTimeout(()=>{
    paolo.animate({'top': '275px','left': '420px'},1900)
  }, delay*2)  
  
  setTimeout(()=>{
    paolo.animate({'top': '245px','left': '390px'},1800)
  }, delay*3)
    
  setTimeout(()=>{
    clouds.fadeIn()
    $('#notify1')[0].play()
  }, delay*6)
  
  
  
  
  $('.next').on('click',()=> {
    window.location = 'monitoring-seller'
  })

})