if (window.matchMedia('(max-width: 767px)').matches) {
$(document).ready(function(){

const swipeSection = document.querySelector('.div-block-206');
var position = 1
var element = document.querySelector('.text');
var t1 = document.getElementById('first-t');
var t2 = document.getElementById('second-t');
let startX = 0;
let currentX = 0;

swipeSection.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    currentX = startX;
});

swipeSection.addEventListener('touchmove', (e) => {
    currentX = e.touches[0].clientX;
});

swipeSection.addEventListener('touchend', () => {
    const deltaX = currentX - startX;

    if (deltaX > 50) {


if (position===2){

document.querySelector('.phone0').style.left='-22em'
document.querySelector('.phone0').style.opacity='0.5'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='26em'
document.querySelector('.phone1').style.top='0'
document.querySelector('.phone1').style.width='47.98em'
document.querySelector('.phone1').style.height='96.93em'
document.querySelector('.phone1').style.opacity='1'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='87.75em'
document.querySelector('.phone2').style.top='13.33em'
document.querySelector('.phone2').style.width='34.9em'
document.querySelector('.phone2').style.height='70.27em'
document.querySelector('.phone2').style.opacity='0.5'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bullet2').style.backgroundColor='#df6437'
   document.querySelector('.bullet2').style.transition='all 1s ease'

   document.querySelector('.bullet3').style.backgroundColor='#c4c4c4'
   document.querySelector('.bullet3').style.transition='all 1s ease'
    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Preguntas sobre el mercado eléctrico'
    t2.innerText = 'Emilia puede explicarte los distintos tipos de tarifas, las ventajas y desventajas de cada una o los factores que hacen que suba el precio de la luz.'
        element.classList.remove('hidden');
    }, 500);
        position=position-1  
}
else if(position===1){


document.querySelector('.phone0').style.left='26em'
document.querySelector('.phone0').style.top='0'
document.querySelector('.phone0').style.width='47.98em'
document.querySelector('.phone0').style.height='96.93em'
document.querySelector('.phone0').style.opacity='1'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='87.75em'
document.querySelector('.phone1').style.top='13.33em'
document.querySelector('.phone1').style.width='34.9em'
document.querySelector('.phone1').style.height='70.27em'
document.querySelector('.phone1').style.opacity='0.5'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='120em'
document.querySelector('.phone2').style.opacity='0.5'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bullet1').style.backgroundColor='#df6437'
   document.querySelector('.bullet1').style.transition='all 1s ease'

   document.querySelector('.bullet2').style.backgroundColor='#c4c4c4'
   document.querySelector('.bullet2').style.transition='all 1s ease'
    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Información en tiempo real sobre precios'
    t2.innerText = 'Emilia te ayuda a obtener información veraz y contrastada sobre el precio de mercado de la luz y sus movimientos.'
        element.classList.remove('hidden');
    }, 500);
        position=position-1  
}
    } else if (deltaX < -50) {

if(position===0){

document.querySelector('.phone0').style.left='-22em'
document.querySelector('.phone0').style.top='13.33em'
document.querySelector('.phone0').style.width='34.9em'
document.querySelector('.phone0').style.height='70.27em'
document.querySelector('.phone0').style.opacity='0.5'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='26em'
document.querySelector('.phone1').style.top='0'
document.querySelector('.phone1').style.width='47.98em'
document.querySelector('.phone1').style.height='96.93em'
document.querySelector('.phone1').style.opacity='1'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='87.75em'
document.querySelector('.phone2').style.transition='all 1s ease'


   document.querySelector('.bullet2').style.backgroundColor='#df6437'
   document.querySelector('.bullet2').style.transition='all 1s ease'

   document.querySelector('.bullet1').style.backgroundColor='#c4c4c4'
   document.querySelector('.bullet1').style.transition='all 1s ease'

    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Preguntas sobre el mercado eléctrico'
    t2.innerText = 'Emilia puede explicarte los distintos tipos de tarifas, las ventajas y desventajas de cada una o los factores que hacen que suba el precio de la luz.'
        element.classList.remove('hidden');
    }, 500);
    position=position+1    
}
else if (position===1){

document.querySelector('.phone0').style.left='-62em'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='-22em'
document.querySelector('.phone1').style.top='13.33em'
document.querySelector('.phone1').style.width='34.9em'
document.querySelector('.phone1').style.height='70.27em'
document.querySelector('.phone1').style.opacity='0.5'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='26em'
document.querySelector('.phone2').style.top='0'
document.querySelector('.phone2').style.width='47.98em'
document.querySelector('.phone2').style.height='96.93em'
document.querySelector('.phone2').style.opacity='1'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bullet3').style.backgroundColor='#df6437'
   document.querySelector('.bullet3').style.transition='all 1s ease'

   document.querySelector('.bullet2').style.backgroundColor='#c4c4c4'
   document.querySelector('.bullet2').style.transition='all 1s ease'
    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Atención al cliente personalizada'
    t2.innerText = 'Emilia está entrenada para resolver tus dudas sobre la app de Chippio y nuestros servicios en tiempo real.'
        element.classList.remove('hidden');
    }, 500);
        position=position+1  
}

    }
});

})


} else {

$(document).ready(function(){
const phone0 = document.querySelector('.phone0');
phone0.style.left = '20.75em';
phone0.style.top = '4.37em';
phone0.style.width = '14.59em';
phone0.style.height = '29.62em';
phone0.style.opacity = '0.5';

// Force layout calculation
phone0.offsetHeight;
})

var position = 1
var r= document.querySelector('.img-right')
var r2= document.querySelector('.img-right-2')
var l= document.querySelector('.img-left-2')
var l2= document.querySelector('.img-left')
var element = document.querySelector('.text');
var t1 = document.getElementById('first-t');
var t2 = document.getElementById('second-t');

document.querySelector('.phone1').addEventListener('click', function(){
    position=1  
    l.style.display='block'
    l2.style.display='none'
    r.style.display='block'
    r2.style.display='none'

document.querySelector('.phone0').style.left='20.75em'
document.querySelector('.phone0').style.top='4.37em'
document.querySelector('.phone0').style.width='14.59em'
document.querySelector('.phone0').style.height='29.62em'
document.querySelector('.phone0').style.opacity='0.5'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='40.52em'
document.querySelector('.phone1').style.top='0'
document.querySelector('.phone1').style.width='18.97em'
document.querySelector('.phone1').style.height='38.36em'
document.querySelector('.phone1').style.opacity='1'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='64.66em'
document.querySelector('.phone2').style.top='4.37em'
document.querySelector('.phone2').style.width='14.59em'
document.querySelector('.phone2').style.height='29.62em'
document.querySelector('.phone2').style.opacity='0.5'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bar12').style.transform='translateX(26em)'
   document.querySelector('.bar12').style.transition='all 1s ease'
    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Preguntas sobre el mercado eléctrico'
    t2.innerText = 'Emilia puede explicarte los distintos tipos de tarifas, las ventajas y desventajas de cada una o los factores que hacen que suba el precio de la luz.'
        element.classList.remove('hidden');
    }, 500);
 
})

document.querySelector('.phone2').addEventListener('click', function(){
    position=2
    l2.style.display='none'
    l.style.display='block'
    r.style.display='none'
    r2.style.display='block'

document.querySelector('.phone0').style.left='6.87em'
document.querySelector('.phone0').style.top='8.99em'
document.querySelector('.phone0').style.width='10.06em'
document.querySelector('.phone0').style.opacity='0.5'
document.querySelector('.phone0').style.height='20.42em'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='20.75em'
document.querySelector('.phone1').style.top='4.37em'
document.querySelector('.phone1').style.width='14.59em'
document.querySelector('.phone1').style.height='29.62em'
document.querySelector('.phone1').style.opacity='0.5'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='40.52em'
document.querySelector('.phone2').style.top='0'
document.querySelector('.phone2').style.width='18.97em'
document.querySelector('.phone2').style.height='38.36em'
document.querySelector('.phone2').style.opacity='1'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bar12').style.transform='translateX(52em)'
   document.querySelector('.bar12').style.transition='all 1s ease'

    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Atención al cliente personalizada'
    t2.innerText = 'Emilia está entrenada para resolver tus dudas sobre la app de Chippio y nuestros servicios en tiempo real.'
        element.classList.remove('hidden');
    }, 500);

})

document.querySelector('.phone0').addEventListener('click', function(){
    position=0
    l2.style.display='block'
    l.style.display='none'
    r.style.display='block'
    r2.style.display='none'

document.querySelector('.phone0').style.left='40.52em'
document.querySelector('.phone0').style.top='0'
document.querySelector('.phone0').style.width='18.97em'
document.querySelector('.phone0').style.height='38.36em'
document.querySelector('.phone0').style.opacity='1'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='64.66em'
document.querySelector('.phone1').style.top='4.37em'
document.querySelector('.phone1').style.width='14.59em'
document.querySelector('.phone1').style.opacity='0.5'
document.querySelector('.phone1').style.height='29.62em'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='83.07em'
document.querySelector('.phone2').style.top='8.99em'
document.querySelector('.phone2').style.width='10.06em'
document.querySelector('.phone2').style.opacity='0.5'
document.querySelector('.phone2').style.height='20.42em'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bar12').style.transform='translateX(0em)'
   document.querySelector('.bar12').style.transition='all 1s ease'

    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Información en tiempo real sobre precios'
    t2.innerText = 'Emilia te ayuda a obtener información veraz y contrastada sobre el precio de mercado de la luz y sus movimientos.'
        element.classList.remove('hidden');
    }, 500);

})

r.addEventListener('click', function(){
if(position===0){
    l2.style.display='none'
    l.style.display='block'

document.querySelector('.phone0').style.left='20.75em'
document.querySelector('.phone0').style.top='4.37em'
document.querySelector('.phone0').style.width='14.59em'
document.querySelector('.phone0').style.height='29.62em'
document.querySelector('.phone0').style.opacity='0.5'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='40.52em'
document.querySelector('.phone1').style.top='0'
document.querySelector('.phone1').style.width='18.97em'
document.querySelector('.phone1').style.height='38.36em'
document.querySelector('.phone1').style.opacity='1'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='64.66em'
document.querySelector('.phone2').style.top='4.37em'
document.querySelector('.phone2').style.width='14.59em'
document.querySelector('.phone2').style.height='29.62em'
document.querySelector('.phone2').style.opacity='0.5'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bar12').style.transform='translateX(26em)'
   document.querySelector('.bar12').style.transition='all 1s ease'
    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Preguntas sobre el mercado eléctrico'
    t2.innerText = 'Emilia puede explicarte los distintos tipos de tarifas, las ventajas y desventajas de cada una o los factores que hacen que suba el precio de la luz.'
        element.classList.remove('hidden');
    }, 500);
    position=position+1    
}
else if (position===1){

document.querySelector('.phone0').style.left='6.87em'
document.querySelector('.phone0').style.top='8.99em'
document.querySelector('.phone0').style.width='10.06em'
document.querySelector('.phone0').style.opacity='0.5'
document.querySelector('.phone0').style.height='20.42em'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='20.75em'
document.querySelector('.phone1').style.top='4.37em'
document.querySelector('.phone1').style.width='14.59em'
document.querySelector('.phone1').style.height='29.62em'
document.querySelector('.phone1').style.opacity='0.5'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='40.52em'
document.querySelector('.phone2').style.top='0'
document.querySelector('.phone2').style.width='18.97em'
document.querySelector('.phone2').style.height='38.36em'
document.querySelector('.phone2').style.opacity='1'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bar12').style.transform='translateX(52em)'
   document.querySelector('.bar12').style.transition='all 1s ease'

    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Atención al cliente personalizada'
    t2.innerText = 'Emilia está entrenada para resolver tus dudas sobre la app de Chippio y nuestros servicios en tiempo real.'
        element.classList.remove('hidden');
    }, 500);
        position=position+1  
}

})



l.addEventListener('click', function(){
if(position===1){
    l.style.display='none'
    l2.style.display='block'

document.querySelector('.phone0').style.left='40.52em'
document.querySelector('.phone0').style.top='0'
document.querySelector('.phone0').style.width='18.97em'
document.querySelector('.phone0').style.height='38.36em'
document.querySelector('.phone0').style.opacity='1'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='64.66em'
document.querySelector('.phone1').style.top='4.37em'
document.querySelector('.phone1').style.width='14.59em'
document.querySelector('.phone1').style.opacity='0.5'
document.querySelector('.phone1').style.height='29.62em'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='83.07em'
document.querySelector('.phone2').style.top='8.99em'
document.querySelector('.phone2').style.width='10.06em'
document.querySelector('.phone2').style.opacity='0.5'
document.querySelector('.phone2').style.height='20.42em'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bar12').style.transform='translateX(0em)'
   document.querySelector('.bar12').style.transition='all 1s ease'

    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Información en tiempo real sobre precios'
    t2.innerText = 'Emilia te ayuda a obtener información veraz y contrastada sobre el precio de mercado de la luz y sus movimientos.'
        element.classList.remove('hidden');
    }, 500);
    position=position-1    
}
else if (position===2){

document.querySelector('.phone0').style.left='20.75em'
document.querySelector('.phone0').style.top='4.37em'
document.querySelector('.phone0').style.width='14.59em'
document.querySelector('.phone0').style.height='29.62em'
document.querySelector('.phone0').style.opacity='0.5'
document.querySelector('.phone0').style.transition='all 1s ease'

document.querySelector('.phone1').style.left='40.52em'
document.querySelector('.phone1').style.top='0'
document.querySelector('.phone1').style.width='18.97em'
document.querySelector('.phone1').style.height='38.36em'
document.querySelector('.phone1').style.opacity='1'
document.querySelector('.phone1').style.transition='all 1s ease'

document.querySelector('.phone2').style.left='64.66em'
document.querySelector('.phone2').style.top='4.37em'
document.querySelector('.phone2').style.width='14.59em'
document.querySelector('.phone2').style.height='29.62em'
document.querySelector('.phone2').style.opacity='0.5'
document.querySelector('.phone2').style.transition='all 1s ease'

   document.querySelector('.bar12').style.transform='translateX(26em)'
   document.querySelector('.bar12').style.transition='all 1s ease'
    element.classList.add('hidden')

    setTimeout(() => {
    t1.innerText = 'Preguntas sobre el mercado eléctrico'
    t2.innerText = 'Emilia puede explicarte los distintos tipos de tarifas, las ventajas y desventajas de cada una o los factores que hacen que suba el precio de la luz.'
        element.classList.remove('hidden');
    }, 500);
        position=position-1  

}

})
}