body{
    width: 2160px !important;
    height: 3840px;
    margin: 0px;
    font-family: 'Inter', sans-serif; 
    font-weight: 500;
    color: white;
    background-color: white;
}

body a{ text-decoration: none; }

input:focus{ outline: none; }


/* ----- CABECERA TODAS LAS PANTALLAS ----- */

header{ font-weight: 400; }

header .slider ul{
    width: 500%;
    margin-top: 0px;
    padding: 0;
    animation: siguienteFoto 30s infinite linear;
}

@keyframes siguienteFoto{
    0% {margin-left: 0;}
    20% {margin-left: 0;}

    25% {margin-left: -100%;}
    45% {margin-left: -100%;}

    50% {margin-left: -200%;}
    70% {margin-left: -200%;}

    75% {margin-left: -300%;}
    95% {margin-left: -300%;}

    100% {margin-left: -400%;}
}

header #logo{
    top: 67px;
    left: 117px;
}

header #reloj{
    top: 483px;
    left: 125px;
    font-size: 300px;
}

/* header #idiomas{
    top: 130px;
    left: 1275px;
}

header .bandera{
    margin-right: 15px;
    border-radius: 50%;
    box-shadow: 6px 6px 10px 2px rgb(85, 85, 85); 
} */

header #lectorPantalla{
    top: 75px;
    left: 1900px;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 7px solid white;
    box-shadow: 6px 6px 10px 2px rgb(85, 85, 85);
}

header #lectorPantalla img{
    top: 20px;
    right: 26px;
}

header #primerafila{
    top: 510px;
    left: 1350px;
    align-items: baseline;
}

header #temperatura { font-size: 180px; }

header #tiempo { font-size: 50px; }

header #tiempo::first-letter { text-transform: uppercase; }

header #rangoTemperatura {
    top: 718px;
    left: 1350px;
}

header #maximo{ margin-right: 30px; }

/* ----- CABECERA TODAS LAS PANTALLAS ----- */


/* ----- TODAS (o casi todas) LAS PANTALLAS ----- */

main{ padding: 70px 100px; }

#volver{ width: 300px; }

#volver p{
    margin: 0px 0px 0px 25px;
    font-size: 72px;
}

footer{
    padding: 68px 292px 0px 168px;
    background-color: #ECECEC;
}

/* ----- TODAS (o casi todas) LAS PANTALLAS ----- */


/* ----- PÁGINA PRINCIPAL ----- */

#mainprincipal{ padding: 20px 100px; }

main .foto{ margin: 150px 60px; } /* margin: 25px 60px; ----- con footer app */ /* margin: 150px 60px; ----- sin footer app */

main .encuesta{
    width: 1708px;
    height: 178px;
    margin: 40px auto 50px auto !important;
    padding: 0px 60px;
}

footer .descargaApp{ margin: -46px 0px 0px 170px; }

footer .descargaApp p{ margin-bottom: 20px; }

/* CARRUSEL (TEMPORAL) ------ Sustituye los 6 botones que todavía no están listos */
main .carrusel{
    height: 1512px;
    margin: 50px 0px 150px 0px;  /* margin: 65px 0px; ----- con footer app */  /* margin: 50px 0px 150px 0px; ------ sin footer app */
}

main .carrusel ul{
    width: 900%;
    padding: 0;
    animation: fotoSiguiente 30s infinite linear;
}

@keyframes fotoSiguiente{
    0% {margin-left: 0;}
    8% {margin-left: 0;}

    12% {margin-left: -100%;}
    20% {margin-left: -100%;}

    25% {margin-left: -200%;}
    33% {margin-left: -200%;}

    37% {margin-left: -300%;}
    45% {margin-left: -300%;}

    50% {margin-left: -400%;}
    58% {margin-left: -400%;}

    62% {margin-left: -500%;}
    70% {margin-left: -500%;}

    75% {margin-left: -600%;}
    83% {margin-left: -600%;}

    87% {margin-left: -700%;}
    95% {margin-left: -700%;}

    100% {margin-left: -800%;}
}
/* CARRUSEL (TEMPORAL) ------ Sustituye los 6 botones que todavía no están listos */

/* ----- PÁGINA PRINCIPAL ----- */


/* ----- PÁGINA COMPARTE TU FOTO ----- */

.contentarea{ margin: 230px 0px 0px 150px; }

#photo, #video{ height: 100%; }

#canvas{
    top: 0px;
    left: 0px;
}

#eleccion{
    top: 910px;/* 1100 */ /* 1075 */
    left: 395px; /* 900 */ /* 340 */
    font-size: 24px;
}

#eleccion p{
    font-size: 48px;
    color: #8f1336;
    padding: 25px 50px;
    background-color: white;
    border-radius: 25px;
}

#previsualizacion{
    top: -130px; 
    left: 0px;
    background-color: black;
}

.camera, .output{
    width: 1457px !important;
    height: 1092.75px !important; 
}

.opcionesfoto{ padding-top: 130px; }

.opcionesfoto .opcionfoto{ margin: 50px 0px 0px 70px; }

.nombreopcion{
    margin: 10px;
    font-size: 21px;
}

#startbutton{
    width: 605px;
    height: 182px;
    margin: 75px 0px 230px 426px; /* 75px 0px 230px 426px */ /* 220px 0px 85px 426px */
}

#temporizador{
    top: -75px;  /* top: 525px; --> Si texto y numeros abajo (los dos, no solo texto) */
    left: 578.5px;
}

#temporizador #numerosTemporizador{
    width: 300px;
    height: 230px;
    padding-top: 60px;  /* cambiar si texto y numeros abajo (los dos, no solo texto) */
    font-size: 150px;
    font-weight: 800;
}

#temporizador .textoTemporizador{
    margin: 575px 0px 0px -328.875px;
    padding: 5px 20px;
    font-size: 64px;
}

#papelera{
    top: 950px; 
    right: 375px;
    width: 102px;  /* undo.svg --> width: 100px; */ /* papelera --> width: 97px; */
    height: 108px; /* undo.svg --> height: 106px; */ /* papelera --> height: 92px; */
    padding: 12px 0px 0px 18px;  /* undo.svg --> padding: 14px 0px 0px 20px; */ /* papelera --> padding: 23px 0px 0px 28px; */
}

.footerfoto{ height: 781px; }

.footerfoto p{ margin: 190px 0px 110px 0px; }

.footerfoto input{
    width: 1077px;
    margin-right: -450px;
    padding-left: 15px;
    border-bottom: 4px solid #8f1336;
    background-color: #ececec00;
}


#spinner{
    top: 300px;
    left: 500px;
}

#spinner p{
    padding: 30px 50px;
    border-radius: 30px;
}

.loader{ 
    margin: 0 auto;
    width: 18em;
    height: 18em;
    border-top: 15px solid #8f1336;  /* border: 20px inset #8f1336; */
    animation: cargando 1.3s infinite linear;
}

  @keyframes cargando{
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.tucorreo{margin-bottom: 85px;}
  
  #aviso{ 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 226px;
    width: 2160px !important;
    margin-left: -168px;
    font-size: 32px;
  }

  #aviso a{ 
    color: white;
    text-decoration: underline;
  }

  #aviso a:hover{ color: #c0bdbd;
    
  }

  #aviso p{margin-top: 0; margin-bottom: 0; margin-right: 50px;}

  #okcondiciones{ 
    border-radius: 50px;
    padding: 10px 20px 48px 22px;
    font-size: 32px;
    height: 50px;  
    border: 3px solid white;
   }

   #okcondiciones:hover{ 
    background-color: #8f1336;
    color: white;
   }
   

/* ----- PÁGINA COMPARTE TU FOTO ----- */


/* ----- PÁGINA RECURSOS ----- */

main h1{
    margin-top: 80px;
    font-size: 100px; 
}

main h4{
    margin: -47px 0px 75px 0px;
    color: #444444;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.3;
}

/* main .recursosh4{margin: 150px 0px 75px 0px;} */ /* CUANDO NO HAY FOOTER */

main #listado, main #listadoRestaurantes, main #listadoRutas, main #listadoAlojamientos, main #listadoParking{
    margin: 30px 0px 34px 1200px;
    padding: 20px 40px;
    border-radius: 30px;
    background-color: white;
    color: white;
    font-size: 48px;
}

#footerRecursos{ padding-top: 95px; padding-bottom: 24px; }

/* ----- PÁGINA RECURSOS ----- */


/* ----- CLASES GENERALES ----- */

.nodisplay{ display: none; }

.relative{ position: relative; }

.absolute{ position: absolute; }

.flex{ display: flex; }

.alignCenter{ align-items: center; }

.spaceAround{ justify-content: space-around; }

.w100{ width: 100%; }

.overflow{ overflow: hidden; }

.textCenter{ text-align: center; }

.font60{ font-size: 60px; }

.magenta{ color: #8f1336; }

.fondoMagenta{
    background-color: #8f1336;
    color: white;
}

.lista{ list-style: none; }

.color62{ color: #626262; }

.noborder{ border: none; }

.border50{ border-radius: 50%; }

.sombra{
    border-radius: 50px;
    box-shadow: 6px 6px 10px 1px rgb(124, 124, 124);
}

.fondoTemporizador{ background-color: #ffffff7a;}

/* ----- CLASES GENERALES ----- */