body{
    width: 840px !important;  /* width: 875px !important;  */
    height: 1510px;   /* 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: 288; height: 362,88px;}

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: 27px;
    left: 44.26px;
}

header #reloj{
    top: 185.61px;
    left: 48.336px;
    font-size: 115px;
}

header #idiomas{
    top: 52px;
    left: 494.4px;
}

header .bandera{
    margin-right: 2.88px;
    border-radius: 50%;
    box-shadow: 1.2px 1.2px 2px 0.4px rgb(85, 85, 85); 
} 

header .idiomaOn{
    box-shadow: 1.2px 1.2px 2px 0.8px rgb(255, 255, 255); 
}

header #lectorPantalla{
    top: 30.93px;
    left: 734.7px;
    width: 38.66px;
    height: 38.66px;
    padding: 7.73px;
    border: 2.74px solid white;
    box-shadow: 2.438px 2.438px 4,028px 1px rgb(85, 85, 85);
}

header #lectorPantalla img{
    top: 7.73px;
    right: 10.07424px;
}

header #primerafila{
    top: 197.414px;
    left: 522.02px;
    align-items: baseline;
}

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

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

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

header #rangoTemperatura {
    top: 277.65px;
    left: 522.02px;
}

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

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


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

main{ padding: 25.53px 36.48px; }

#volver{ width: 500px; }

#volver p{
    margin: 0px 0px 0px 4.8px;
    font-size: 30px;
}

.ml20{margin-left: 19px;}

footer{
    padding: 24.80px 106.52px 0px 61.28px;
    background-color: #ECECEC;
}

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


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

#mainprincipal{ padding: 7.73px 38.66px; }

main .foto{ margin: 5px 23.2px 15px 23.2px; width:328.68px; } /* margin: 25px 60px; ----- con footer app */ /* margin: 150px 60px; ----- sin footer app */

main .fotos{ margin: 15.36px 23.2px 0px 23.2px; }

main .encuesta{
    width: 660.46px;
    height: 68.83px;
    margin: 10px auto 20px auto !important;
    padding: 0px 30.528px;
}

main .encuestaIngles{font-size: 23px;}

main .encuestatodosbotones{
    width: 660.46px;
    height: 68.83px;
    margin: 14.4px auto !important;
    padding: 0px 30.528px;
}

footer .descargaApp{ margin: -44.16px 0px 0px 163.2px; }

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

/* 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: 86.4px 0px 0px 24px; }

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

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

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

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

#previsualizacion{
    top: -50px; 
    left: 0px;
    background-color: black;
    width: 560px !important;
}

.camera, .output, #photo, #video, #canvas{
    width: 560px !important;
    height: 419.52px !important;  
}

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

.nombreopcion{
    margin: 3.84px;
    font-size: 15.36px;
}

#startbutton{
    width: 273.6px; /* 242px; Sacar foto  */ 
    height: 57.6px;
    margin: 28.8px 0px 88.32px 144px; /* 30px 0px 92px 170.4px; Sacar foto  */
}

.botonaleman{margin-bottom: 60.48px !important;}

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

#temporizador #numerosTemporizador{
    width: 115.2px;
    height: 88.32px;
    padding-top: 23px;  /* cambiar si texto y numeros abajo (los dos, no solo texto) */
    font-size: 57.6px;
    font-weight: 768;
}

#temporizador .textoTemporizador{
    margin: 220.8px 0px 0px -127.248px;
    padding: 1.92px 7.68px;
    font-size: 23px;
}

#papelera{
    top: 364.8px; 
    right: 192px;
    width: 39.168px;  /* undo.svg --> width: 100px; */ /* papelera --> width: 97px; */
    height: 41.472px; /* undo.svg --> height: 106px; */ /* papelera --> height: 92px; */
    padding: 4.6px 0px 0px 7px;  /* undo.svg --> padding: 14px 0px 0px 20px; */ /* papelera --> padding: 23px 0px 0px 28px; */
}

.footerfoto{ height: 316.5px; }

.footerfoto p{ margin: 73px 0px 42.24px 0px; }

.footerfoto input{
    width: 413.568px;
    margin-right: -172.8px;
    padding-left: 5.76px;
    border-bottom: 1.536px solid #8f1336;
    background-color: #ececec00;
}


#spinner{
    top: 115.2px;
    left: 85.6px;
    width: 400px;
}

#spinner p{
    padding: 11.52px 19.2px;
    border-radius: 11.52px;
}

#tufoto .spinneraleman{ left: 96.96px;}
#tufoto .spinneringles{ left: 92.27px;}
#tufoto .spinnerportugues{ left: 84.48px;}
#tufoto .spinnerfrances{ left: 54.72px;}

.loader{ 
    margin: 0 auto;
    width: 6.912em;
    height: 6.912em;
    border-top: 5.76px 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: 840px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 73.750px;
    margin-left: -61.632px;
    font-size: 15.36px;
  }

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

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

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

  .avisofrances{justify-content: space-around !important;}

  #okcondiciones{ 
    border-radius: 48px;
    padding: 3.84px 14.4px 21.12px 14.4px;
    font-size: 15.36px;
    height: 19.2px;  
    border: 1.92px solid white;
   }

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

   #correoenviado{
    top: 1262.4px;
    left: 295.68px;
    font-size: 17.28px;
}

.correoenviadoaleman{top: 1265.28px !important;}

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


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

main h1{
    margin-top: 31.2px;
    font-size: 38.4px; 
}

main h4{
    margin: -19.2px 0px 48px 0px;
    color: #444444;
    font-size: 17.28px;
    font-weight: 288;
    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: 11.52px 0px 15.36px 432px;
    padding: 7.68px 15.36px;
    border-radius: 11.52px;
    background-color: white;
    color: white;
    font-size: 20.16px;
}

#footerRecursos{ padding-top: 91.2px; padding-bottom: 23.04px; }

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

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

.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 ----- */