body{
    width: 857.5px !important;  /* width: 875px !important;  */
    height: 1541.45px;   /* 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: 294; height: 370.44px;}

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: 27.56px;
    left: 45.18px;
}

header #reloj{
    top: 189.47px;
    left: 49.343px;
    font-size: 117px;
}

header #idiomas{
    top: 53.08px;
    left: 504.7px;
}

header .bandera{
    margin-right: 2.94px;
    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: 31.57px;
    left: 750px;
    width: 39.46px;
    height: 39.46px;
    padding: 7.89px;
    border: 2.8px solid white;
    box-shadow: 2.438px 2.438px 4,028px 1px rgb(85, 85, 85);
}

header #lectorPantalla img{
    top: 7.89px;
    right: 10.28412px;
}

header #primerafila{
    top: 201.52px;
    left: 532.89px;
    align-items: baseline;
}

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

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

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

header #rangoTemperatura {
    top: 283.43px;
    left: 532.89px;
}

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

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


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

main{ padding: 26.06px 37.24px; }

#volver{ width: 510px; }

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

.ml20{margin-left: 19.39px;}

footer{
    padding: 25.31px 108.73px 0px 62.55px;
    background-color: #ECECEC;
}

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


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

#mainprincipal{ padding: 22.89px 90.5px; }

main .foto{ margin: 20px 30.68px 6.31px 30.68px; width:325.52px; } /* margin: 25px 60px; ----- con footer app */ /* margin: 150px 60px; ----- sin footer app */
main .foto1{ margin: 12px 39px 6.31px 0px; width:316.52px; }
main .foto2{ margin: 12px 0px 6.31px 0px; width:316.52px; }

main .fotos{ margin: 15.68px 23.68px 0px 23.68px; }

main .encuesta{
    width: 644.22px;
    height: 70.26px;
    margin: 25px auto 8.40px auto !important;
    padding: 0px 16.164px;
}

.font23{ font-size: 23px; }

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

main .encuestatodosbotones{
    width: 674.22px;
    height: 60.26px;
    margin: 14.7px auto !important;
    padding: 0px 31.164px;
}

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

#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: 359.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: 857.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 115.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: #f2f2f2;;
    color: #f2f2f2;;
    font-size: 20.16px;
}

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

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

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

.pestana{ background-color: #f2f2f2; margin: 0px; padding: 40px 1px 25px 40px;}

/* funcionamiento básico del sistema de pestañas */
.tab-content {
    display: none;
  }
  
  .tab:target .tab-content, .tab:last-of-type .tab-content {
    display: block;
  }
  
  .tab:target ~ .tab:last-of-type .tab-content {
    display: none;
  }

  /* parámetros para configurar las pestañas */
:root {
    --tabs-border-color: #8f1336;
    --tabs-border-size: 2px;
    --tabs-text-color: #8f1336;
    --tabs-dark-color: white;
    --tabs-lite-color: white;
    --tabs-width: 175px;
    --tabs-height: 40px;
  }
  
  /* aspecto básico */
  body {
    font-family: sans-serif;
    line-height: 1.2;
  }
  .tabs * {
    box-sizing: border-box;
  }

  /* esto es para posicionar las pestañas correctamente */
.tab-container {
    position: relative;
    padding-top: var(--tabs-height); /* en esta zona colocaremos las pestañas */
  } 
  #tab1>a { --tabs-position: 0; }
  #tab2>a { --tabs-position: 1; }
  .tab>a {
    text-align: center;
    position: absolute;
    width: calc(var(--tabs-width));
    height: calc(var(--tabs-height) + var(--tabs-border-size)); 
    top: 0;
    left: calc(var(--tabs-width) * var(--tabs-position)); /* posición de cada pestaña */
  }

  /* más aspecto */
.tabs { 
    margin-top: 45px;
    color: var(--tabs-text-color);
  }
  .tab-content {
    background-color: #f2f2f2; 
    /* padding: 20px; */
    border: var(--tabs-border-size) solid var(--tabs-border-color);
    border-radius: 0 0 10px 10px;
    position: relative;
    z-index: 100;
  }
  .tab>a {
    background-color: var(--tabs-dark-color); 
    color: #8f1336;
    font-weight: 500;
    padding: 7px;
    border: var(--tabs-border-size) solid var(--tabs-border-color);
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
    font-size: 21px;
  }
  .tab:target>a, .tab:last-of-type>a {
    background-color: var(--tabs-lite-color); 
    z-index: 200;
  }
  .tab:target ~ .tab:last-of-type>a {
    background-color: var(--tabs-dark-color); 
    z-index: 0; 
  }

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

.tablaPlazas{margin-top: 50px; margin-bottom:20px;}
.borderBottom{border-bottom:2.5px solid #8f1336;}
.borderBottom2{border-bottom:1px solid #8f1336; margin-top: 15px;}