body{
    width: 875px !important;
    height: 1573px;
    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: 300; height: 378px;}

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: 28.196px;
    left: 46.11px;
}

header #reloj{
    top: 193.344px;
    left: 50.35px;
    font-size: 120px;
}

/* header #idiomas{
    top: 65px;
    left: 637.5px;
}

header .bandera{
    margin-right: 7.5px;
    border-radius: 50%; //25%??
    box-shadow: 3px 3px 5px 1px rgb(85, 85, 85); 
} */

header #lectorPantalla{
    top: 32.224px;
    left: 765.32px;
    width: 40.28px;
    height: 40.28px;
    padding: 8.056px;
    border: 2.862px solid white;
    box-shadow: 2.438px 2.438px 4,028px 1px rgb(85, 85, 85);
}

header #lectorPantalla img{
    top: 8.056px;
    right: 10.494px;
}

header #primerafila{
    top: 205.64px;
    left: 543.78px;
    align-items: baseline;
}

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

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

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

header #rangoTemperatura {
    top: 289.221px;
    left: 543.78px;
}

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

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


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

main{ padding: 26.6px 38px; }

#volver{ width: 200px; }

#volver p{
    margin: 0px 0px 0px 12.5px;
    font-size: 32px;
}

footer{
    padding: 25.84px 110.96px 0px 63.84px;
    background-color: #ECECEC;
}

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


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

#mainprincipal{ padding: 8.056px 40.28px; }

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

main .encuesta{
    width: 687.9824px;
    height: 71.6984px;
    margin: 15px auto 25px auto !important;
    padding: 0px 31.8px;
}

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 ul{
    width: 900%;
    padding: 0;
    animation: fotoSiguiente 60s infinite linear;
}

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

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

    24% {margin-left: -200%;}
    34% {margin-left: -200%;}

    36% {margin-left: -300%;}
    46% {margin-left: -300%;}

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

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

    72% {margin-left: -600%;}
    82% {margin-left: -600%;}

    84% {margin-left: -700%;}
    98% {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: 90px 0px 0px 25px; }

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

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

#eleccion{
    top: 364px;/* 1100 */ /* 1075 */
    left: 158px; /* 900 */ /* 340 */
    font-size: 12px;
}

#eleccion p{
    font-size: 21px;
    color: #8f1336;
    padding: 10px 20px;
    background-color: white;
    border-radius: 10px;
}

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

.camera, .output{
    width: 583px !important;
    height: 437px !important; 
}

.opcionesfoto .opcionfoto{ 
    flex-direction: column;
    align-items: center;
    margin: 10px 0px 0px 28px;
}

.nombreopcion{
    margin: 4px;
    font-size: 16px;
}

#startbutton{
    width: 242px;
    height: 60px;
    margin: 30px 0px 92px 170.4px; /* 75px 0px 230px 426px */ /* 220px 0px 85px 426px */
}

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

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

#temporizador .textoTemporizador{
    margin: 230px 0px 0px -131.55px;
    padding: 2px 8px;
    font-size: 24px;
}

#papelera{
    top: 380px; 
    right: 150px;
    width: 40.8px;  /* undo.svg --> width: 100px; */ /* papelera --> width: 97px; */
    height: 43.2px; /* undo.svg --> height: 106px; */ /* papelera --> height: 92px; */
    padding: 4.8px 0px 0px 7.2px;  /* undo.svg --> padding: 14px 0px 0px 20px; */ /* papelera --> padding: 23px 0px 0px 28px; */
}

.footerfoto{ height: 340px; }

.footerfoto p{ margin: 76px 0px 44px 0px; }

.footerfoto input{
    width: 430.8px;
    margin-right: -180px;
    padding-left: 6px;
    border-bottom: 1.6px solid #8f1336;
    background-color: #ececec00;
}


#spinner{
    top: 120px;
    left: 200px;
}

#spinner p{
    padding: 12px 20px;
    border-radius: 12px;
}

.loader{ 
    margin: 0 auto;
    width: 7.2em;
    height: 7.2em;
    border-top: 6px 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: 59.5px;}
  
  #aviso{ 
      width: 875px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90.4px;
    margin-left: -64.2px;
    font-size: 16px;
  }

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

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

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

  #okcondiciones{ 
    border-radius: 50px;
    padding: 4px 15px 22px 15px;
    font-size: 16px;
    height: 20px;  
    border: 2px solid white;
   }

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

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


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

main h1{
    margin-top: 32.5px;
    font-size: 40px; 
}

main h4{
    margin: -20px 0px 50px 0px;
    color: #444444;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.2;
}

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

main #listado, main #listadoRestaurantes, main #listadoRutas, main #listadoAlojamientos, main #listadoParking{
    margin: 12px 0px 16px 450px;
    padding: 8px 16px;
    border-radius: 12px;
    background-color: white;
    color: white;
    font-size: 21px;
}

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

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


.alojamientos{margin-bottom: 100px;}

/*  #iframeRecursos{
    zoom: 0.9;
    width: 100%;
}  */

/* ----- 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: 25px; }

.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: 25px;
    box-shadow: 3px 3px 5px 1px rgb(124, 124, 124);
}

.fondoTemporizador{ background-color: #ffffff7a;}

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