@charset "UTF-8";



  /* Iframe responsive */
  .iframeResponsive { text-align: center; position: relative; /* padding-bottom: 25%; */ overflow: hidden; /* valores originales para responsive bueno --> margin: 50px auto 50px auto; width: 90%; max-width: 640px; min-height: 300px; */ margin:-105px auto -52px auto; width:100%; max-width:1370px; min-height:878px;  }
    /* elegimos el formato para el iframe. Ej.: formato 3:2 --> (2/3)*100 = 66.66% --> 100%-66.66%=33.34% */
    .digital { padding-bottom: 43.75%; } /* 16:9 */
    .analogico { padding-bottom: 25%; } /* 4:3 */
  .iframeResponsive iframe { position: absolute; display: block; top:0; left: 0; width: 100%; height: 100%; border: 0; }


  /* Girar imagenes, como si una fuera la contraportada de la otra */
    .flip { position: relative; transition: all 1s ease; transform: perspective(600px); transform-origin: 100% 50%; transform-style: preserve-3d; }
    .flip:hover { transform: perspective(600px) rotateY(-180deg) translateX(100%); }

    .flip .flip-1, .flip .flip-2 { position: absolute; backface-visibility: hidden; }
    .flip .flip-2 { transform: rotateY(-180deg); } 



    /* Formas geometricas */
  .TrianguloIzquierda { width: 0; height: 0; border-right: 13px solid #838383; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: relative; bottom: 6%; }
    .TrianguloIzquierda:hover { border-right: 13px solid #68ccf8; }
  .TrianguloDerecha { width: 0; height: 0; border-left: 13px solid #838383; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: relative; bottom: 6%; }
    .TrianguloDerecha:hover { border-left: 13px solid #68ccf8; }
  .Circulo { border-radius:100px; }

  .CirculoResponsive { display:inline-block; line-height:0px; border-radius:50%; border:2px solid; }
    .CirculoResponsive span { display:inline-block; padding-top:50%; padding-bottom:50%; margin-left:8px; margin-right:8px; }

  /* Cuadrado */
  .Cuadrado { padding: 1em; }
  .Cuadrado:before { content:""; display:block; padding-top:100%; }

  /* html 
    <div class='square-box'>
        <div class='square-content'>
            <h3>test</h3>
        </div>
    </div>
  */
  .square-box {
      position: relative;
      width: 50%;
      overflow: hidden;
      background: #4679BD;
  }
  .square-box:before {
      content: "";
      display: block;
      padding-top: 100%;
  }
  .square-content {
      position:  absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      color: white;
      text-align: center;
  }

  /* Hexagono */
  .Hexagono { height: 4em; margin: 3.4641em 0; position: relative; width: 6.9282em; }
  .Hexagono:before { border-right:3.4641em solid transparent; border-bottom:2em solid #ccc; border-left:3.4641em solid transparent; content: ''; height:0; left: 0; position: absolute; right; 0; top: -2em; width: 0; }
  .Hexagono:after { border-top:2em solid #ccc; border-right:3.4641em solid transparent; border-left:3.4641em solid transparent; bottom:-2em; content: ''; height:0; left: 0; position: absolute; right; 0; width:0; }

  .Hexagono2 { height: 5.7735em; position: relative; width: 10em; }
    .Hexagono2:before { background: inherit; content: ''; height: 100%; position: absolute; transform: rotate(-60deg); transform-origin: 50% 50%; width: 100%; top: 0; right: 0; bottom: 0; left:0; }
  .Hexagono2:after { background: inherit; content: ''; height: 100%; position: absolute; transform: rotate(60deg); transform-origin: 50% 50%; width: 100%; top: 0; right: 0; bottom: 0; left:0; }

  /* mostrar puntos suspensivos cuando el texto supere la caja */
  .Ellipsis { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


  /* mensajes alerta */

    /* html 
      <?php 
            $Flag = $_REQUEST['Flag'];

            switch ($Flag) {
                case "1":
                    $TextoAlertaLogin="El nombre de usuario o la contraseña son incorrectos";
                    $ColorAlertaLogin="Rojo";
                    break;
                case "2":
                    $TextoAlertaLogin="El email que ha introducido ya existe en nuestra base de datos";
                    $ColorAlertaLogin="Rojo";
                    break;
                case "3":
                    $TextoAlertaLogin="El registro se ha completado correctamente<br />Introduzca sus datos a continuación para iniciar sesión";
                    $ColorAlertaLogin="Verde";
                    break;
                case "4":
                    $TextoAlertaLogin="Le hemos enviado un email con las intrucciones a seguir para recuperar su contraseña";
                    $ColorAlertaLogin="Verde";
                    break;
                case "5":
                    $TextoAlertaLogin="Ha ocurrido un error al procesar su petición de recuperación de contraseña. Por favor vuelva a intentarlo";
                    $ColorAlertaLogin="Rojo";
                    break;
                case "6":
                    $TextoAlertaLogin="El email que ha introducido no existe";
                    $ColorAlertaLogin="Rojo";
                    break;
                case "7":
                    $TextoAlertaLogin="La contraseña se ha cambiado correctamente.<br />Vuelva a introducirla a continucación para iniciar sesión";
                    $ColorAlertaLogin="Verde";
                    break;
                case "8":
                    $TextoAlertaLogin="Es obligatorio haber iniciado sesión para poder acceder a esa página. Inicie sesión y se le redirigirá a la página a la que intentaba acceder";
                    $ColorAlertaLogin="Rojo";
                    break;
                default:
                  $TextoAlertaLogin="Se ha producido un error inesperado";
                    $ColorAlertaLogin="Rojo";
                    break;
            }

            if ($Flag<>"") { 
          ?>
          <div class="ContenedorAlerta Alerta<?php echo $ColorAlertaLogin ?>">
            <p class="Letra12 Xcenter"><?php echo $TextoAlertaLogin ?></p>
          </div>
          <?php 
            }
          ?>
      */
.ContenedorAlerta { width: 100%; max-width: 500px; padding: 25px 10px; margin: -30px auto 30px auto; }
  .ContenedorAlerta p { margin:0; }

.AlertaVerde { border:2px solid #018001; }
  .AlertaVerde p { color:#018001; }
.AlertaRojo { border:2px solid #d30000; }
  .AlertaRojo p { color:#d30000; }




  /* Popup */
  /* HTML
  <div id="popup" class="PopupPsinnova"> <!-- cambiar clase a -PopupPsinnovaObligatorio- para popup obligatorio, como el de aviso de cookies -->
    <div class="BodyPopup">
      <div class="TituloPopup">
        <h2>Título de la ventana</h2>
        <a href="#">&times;</a>
      </div>
      <div class="ContenidoPopup">
        <p>Este es el contenido</p>
      </div>
    </div>
  </div>

  <a href="#popup">Abrir Popup</a>  
  _HTML */

  .PopupPsinnovaObligatorio { visibility: visible; opacity: 1; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; z-index: 10; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: space-evenly; }

  .PopupPsinnova { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 10; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: space-evenly; }
  .PopupPsinnova:target { visibility: visible; opacity: 1; }

  .BodyPopup { width: 50%; padding: 2%; border-radius: 15px; box-shadow: 0 0 5px #CCC; background: #FFF; position: relative; margin: 0; transition: all 5s ease-in-out; display:flex; flex-direction:column; flex-wrap: nowrap; align-items:start; justify-content: space-evenly; max-height: 90%; }
    .BodyPopup div { width:100%; }
    .TituloPopup { display:flex; flex-direction:row; flex-wrap: wrap; align-items:start; justify-content:space-between; margin-bottom: 10px; font-size: 1.4em; }
      .TituloPopup h2 { font-weight:bold; color:black; margin: 0; width: calc(100% - 50px); }
      .TituloPopup a { font-size: 5em; font-weight: bold; text-decoration: none; color: #F00; line-height: 0.25em; transition: all 200ms; width:30px; }
    .ContenidoPopup { overflow: auto; }
      .ContenidoPopup p { font-weight:normal; color:#6c6c6c; font-size:1.5em; }




    /* otro version de popup, esta va en una linea abajo */
    /* html
        <div id="PopupCookie" class="PopupCookiesAbajo" style="display:none;">
          <div class="BodyPopupCookiesAbajo">
            <!-- <div class="TituloPopupCookiesAbajo">          
              <p class="LetraNegra Letra20 Descartes">Aviso de Cookies</p>
            </div> -->
            <div class="ContenidoPopupCookiesAbajo">
              <div class="Letra14 LetraBlanca">
                <p class="MarginBottom15 MarginTop0 Letra11">Este sitio web usa su propias políticas de cookies así como de terceros, para configurar la navegación de sus usuarios y analizar sus hábitos de navegación. Puede administrar sus cookies y aprender más sobre ellas visitando nuestra Pólitica de Cookies.</p>
              </div>
              <div class="Superfluid Horizontal Ligero Medio Derecha">
                <span class="BotonCookies2 Circulo Letra14 MargenInteriorHorizontalGrande MargenInteriorVertical SinSubrayado Pointer" OnClick="crearCookie();document.getElementById('PopupCookie').style.display='none';">Aceptar</span>
                <span class="BotonCookies Circulo Letra14 MargenInteriorHorizontalGrande MargenInteriorVertical SinSubrayado Pointer" OnClick="JavaScript:document.getElementById('PopupCookie').style.display='none';">Rechazar</span>
                <a class="EnlaceCookies Letra14 Solid" href="politica-cookies.php" target="_blank">Leer políticas</a>
              </div>
            </div>
          </div>
        </div>
    */
    .PopupCookiesAbajo { width:100%; visibility: visible; opacity: 1; position: fixed; bottom: 0; left: 0; background: transparent; transition: opacity 500ms; z-index: 500;  flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: space-evenly; }


  .BodyPopupCookiesAbajo { width: 100%; padding: 10px 20px; border-radius: 15px 15px 0 0; box-shadow: 0 0 5px #CCC; background: #000000c7; position: relative; margin: 0; transition: all 5s ease-in-out; display:flex; flex-direction:column; flex-wrap: nowrap; align-items:start; justify-content: space-evenly; max-height: 90%; }
    .BodyPopupCookiesAbajo div { width:100%; }
    .TituloPopupCookiesAbajo { display:flex; flex-direction:row; flex-wrap: wrap; align-items:start; justify-content:space-between; margin-bottom: 10px; font-size: 1.4em; }
      .TituloPopupCookiesAbajo h2 { font-weight:bold; color:black; margin: 0; width: calc(100% - 50px); }
      .TituloPopupCookiesAbajo a { font-size: 5em; font-weight: bold; text-decoration: none; color: #F00; line-height: 0.25em; transition: all 200ms; width:30px; }
    .ContenidoPopupCookiesAbajo { overflow: auto; }
      .ContenidoPopupCookiesAbajo p {  }

      .BotonCookies { border:2px solid #46b3e1; color:#46b3e1; background-color:#000; padding: 1px 18px; display: inline-block; width: auto; margin-right:20px; }
      .BotonCookies:hover { border:2px solid #46b3e1; color:#000; background-color:#46b3e1; }

      .BotonCookies2 { border:2px solid #46b3e1; color:#000; background-color:#46b3e1; padding: 1px 18px; display: inline-block; width: auto; margin-right:20px; }
      .BotonCookies2:hover { border:2px solid #46b3e1; color:#46b3e1; background-color:#000; }

      .EnlaceCookies { color:#46b3e1; text-decoration:none; padding:3px 0; }
      .EnlaceCookies:hover { color:#FFF; }





    /* Borde Efecto Madera */
  .MarcoMadera { background-color:#723008; background-image: url(http://www.transparenttextures.com/patterns/wood-pattern.png); padding: 10px; } /* esta capa envuelve a otra. Solo hace de marco. */
  .RelieveMarco { box-shadow: inset 0px 0px 10px rgba(0,0,0,1); -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,1); -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,1); -o-box-shadow: inset 0px 0px 10px rgba(0,0,0,1); -ms-box-shadow: inset 0px 0px 10px rgba(0,0,0,1); } /* Esta clase la añadimos a la capa que envuelva "MarcoMadera" para que agregue la sombra que de la sensacion de relieve. */


  /* Fondo */
  .FondoAltura { background-size:cover; }
  .FondoAncho { background-size:contain; }
  .FondoAdaptable { background-size: 100% 100%; }


  /* Botones */
  .Boton { padding:8px 55px 5px 55px; border-radius:7px; cursor:pointer; }
  .Boton:hover { }
  .Boton:active { position:relative; top:2px; }

  .BotonResponsive { padding:8px 0 5px 0; border-radius:7px; width:100%; cursor:pointer; }
  .BotonResponsive:hover { }
  .BotonResponsive:active { position:relative; top:2px; }

  .BotonNaranja { border:2px solid #ec6748; color:#ec6748; background-color:transparent; }
  .BotonNaranja:hover { border:2px solid #ec6748; color:#000000; background-color:#ec6748; }

  .BotonAzul { border:2px solid #1c9cd4; color:#1c9cd4; background-color:transparent; }
  .BotonAzul:hover { border:2px solid #1c9cd4; color:#FFFFFF; background-color:#1c9cd4; }


  /* Custom Select */
    .SelectCampana { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; box-shadow: none; border: 0 !important; background: #2c3e50; background-image: none; }
    /* quitar felcha IE */
    .SelectCampana::-ms-expand { display: none; }
    /* Select */
    .ContenedorSelectCampana { position: relative; display: flex; width: 116px; height: 30px; line-height: 30px; background: #2c3e50; overflow: hidden; border-radius: .25em; }
    .SelectCampana { flex: 1; padding: 0 .5em; color: #fff; cursor: pointer; }
    /* Flechita */
    .ContenedorSelectCampana::after { content: '\25BC'; position: absolute; top: 0; right: 0; padding: 0 1em; background: #34495e; cursor: pointer; pointer-events: none; -webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease; color: white; }
    /* Transicion */
    .ContenedorSelectCampana:hover::after { color: #f39c12; }



  /* Efecto brillo para imagenes. Añadir a continuación de la imagen un div vacío con la clase Brillo. La imagen esta guardada en local en la carpeta "Recursos" */
  .Brillo{
      width:100%; 
      height: 100%; 
      background-image: url(https://lh3.googleusercontent.com/-vxQwquqFF0w/UXP-87VRPyI/AAAAAAAAFdM/g8PlNuj5oXg/s500/brillo.png);
      position: absolute;
      /*posicion de la imagen*/
      background-position: -265px 0; 
      left:0px; top:0px; 
      background-repeat:no-repeat; 
      /*comenzamos transicion*/
      -webkit-transition: background-position .3s ease;
         -moz-transition: background-position .3s ease;
           -o-transition: background-position .3s ease;
              transition: background-position .3s ease;
  }
  .Brillo:hover{
      /*posicion hover de la imagen*/
      background-position: 160px 0;
  }


  /* efecto neon */
  .LetraNeon {
    color: #fff;
    margin-top: 30%;
    text-shadow:
      0 0 5px rgba(0,178,255,1),
      0 0 10px rgba(0,178,255,1),
      0 0 20px rgba(0,178,255,1),
      0 0 40px rgba(38,104,127,1),
      0 0 80px rgba(38,104,127,1),
      0 0 90px rgba(38,104,127,1),
      0 0 100px rgba(38,104,127,1),
      0 0 140px rgba(38,104,127,1),
      0 0 180px rgba(38,104,127,1);
  }

  .Neon {
    background-color: #fff;
    box-shadow:
      0 0 5px rgba(0,178,255,1),
      0 0 10px rgba(0,178,255,1),
      0 0 20px rgba(0,178,255,1),
      0 0 40px rgba(38,104,127,1),
      0 0 80px rgba(38,104,127,1),
      0 0 90px rgba(38,104,127,1),
      0 0 100px rgba(38,104,127,1),
      0 0 140px rgba(38,104,127,1),
      0 0 180px rgba(38,104,127,1);
  }

  .LetraNoNeon { text-shadow:none; }
  .NoNeon { box-shadow:none; }



  /* Barra para porcentajes */
    /* html para la barra 
    <div class="NivelBarra">
      <!-- Variable- El porcentaje del width puesto en inline es lo que va a ocupar la barra azul. Solo el porcentaje, dejar el +1px -->
      <div class="Barra Neon" style="width: calc(50% + 1px);"></div>
    </div>
    */
  .NivelBarra { height:15px; background-color:#525252; width: 90%; margin: 0 auto 45px auto; }
    .Barra { height:15px; background-color:#68ccf8; }
    .Barra2 { height:15px; background-color:#dd0b4e; }

    /* html para la barra con texto y barras colores
      <div class='NivelBarra Einstein'>
        <p class='Letra14 Luis14 TextoBarra'>Si: $PorcentajeSi% </p>
          <!-- Variable- El porcentaje del width puesto en inline es lo que va a ocupar la barra azul. Solo el porcentaje, dejar el +1px -->
          <div class='BarraAzul' style='width: calc($PorcentajeSi% + 1px);'></div>
        </div>
      <br />
      <div class='NivelBarra Einstein'>
        <p class='Letra14 Luis14 TextoBarra'>No: $PorcentajeNo% </p>
          <!-- Variable- El porcentaje del width puesto en inline es lo que va a ocupar la barra azul. Solo el porcentaje, dejar el +1px -->
          <div class='BarraRoja' style='width: calc($PorcentajeNo% + 1px);'></div>
        </div> 
      */

      .BarraAzul { height:25px; background-color:#68ccf8; }
      .BarraRoja { height:25px; background-color:#f04c4c; }

      .TextoBarra { margin:3px 0; right:15px; }



  /* Barra porcentaje automatica */
  /* html
    <div class="BarraProgreso">
      <div class="BarraProgreso-value"></div>
    </div>
  */
  .BarraProgreso {
    background: rgba(255,255,255,0.1);
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 40px;
    width: 500px;
  }

  .BarraProgreso-value {
    animation: load 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 30px;
    width: 0;
  }

  @keyframes load {
    0% { width: 0; }
    100% { width: 100%; }
  }





  /* Slider Psinnova */
  /* html
        <div id="slider">
            <figure class="CincoDiapositivas">
                <img src="https://pixabay.com/static/uploads/photo/2014/11/22/00/51/camera-541213_960_720.jpg" alt="">
                <img src="https://pixabay.com/static/uploads/photo/2015/06/08/15/11/camera-801924_960_720.jpg" alt="">
                <img src="https://pixabay.com/static/uploads/photo/2016/03/10/16/13/camera-1248682_960_720.jpg" alt="">
                <img src="https://pixabay.com/static/uploads/photo/2015/04/07/14/27/camera-711025_960_720.jpg" alt="">
                <img src="https://pixabay.com/static/uploads/photo/2014/09/23/20/13/photography-458050_960_720.jpg" alt="">
            </figure>
            <div class="CapaTextoSlider Luis14 Superfluid Vertical Denso Medio Centro Tesla Felix">
            <!-- 
              Posicion:
                por defecto se colocará en el medio. si se quiere modificar la posicion añadir dos clases: "Luis14" y ("ArribaSlider" o "AbajoSlider") o ("DerechaSlider" o "IzquierdaSlider") en el h2 para el titulo, en la p para el subtitulo o en el span para los botones. 
              Tamaño:
                por defecto se pone el tamaño de letra estandar (equivalente a Letra10). Se puede cambiar el tipo de letra añadiendo la clase "Letra + numero" en las etiquetas "h2", "p" o "a" 
            -->
                <h2>Prueba titulo</h2>
                <p>prueba subtitulo</p>
                <span>
                    <a href="<?php echo $EnlaceBotonDiapositiva?>" class="BotonesSlider Boton1Slider">boton 1<?php echo $TextoBotonDiapositiva?></a>
                    <a href="<?php echo $EnlaceBoton2Diapositiva?>" class="BotonesSlider Boton2Slider" target="_blank">boton 2<?php echo $TextoBoton2Diapositiva?></a>
                </span>
            </div>
        </div>
    fin html */
    div#slider { position:relative; overflow: hidden; } /* las imágenes no van a salir del márgen de la pantalla y controlamos la altura maxima */

    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      /* animation: 30s slidy infinite;*/ /*el movimiento se va a mantener de forma indefinida -infinito-*/
      display:flex; display:-webkit-flex; flex-wrap: wrap; flex-direction:row; -webkit-flex-direction:row; align-items:start; align-items:flex-start; justify-content: start -content: flex-start;
    }

    .ContenedorSlider { width:20%; float:left; position:relative; max-height:350px; } /* fijar o quitar el alto maximo aqui */
    .ContenedorSlider > img { width: 100%; max-width: 1360px; margin: 0 auto; border-radius:7px; } /* si no queremos que la imagen ocupe siempre todo el ancho, lo marcamos aqui y dos lineas mas abajo. Aqui, y en FiltroTexto marcamos el border-radius si es necesario */
    .CapaTextoSlider { top:0; left:0; }
    .AnchoCapaTextoSlider { padding:50px; max-width: 1360px; margin: 0 auto; } /* si no queremos que la imagen ocupe siempre todo el ancho, lo marcamos aqui y dos lineas mas arriba */
      .AnchoCapaTextoSlider > h2 { line-height:1.38; text-align: center; }
      .AnchoCapaTextoSlider > p { line-height:1.38; text-align: center; }
      .AnchoCapaTextoSlider > a {  }
      .FiltroTexto { background-color:#00000069; border-radius:7px; }

    @media screen and (max-width:748px) {
      .ContenedorSlider { max-height:350px; }
      .AnchoCapaTextoSlider { padding:25px; }
    }

    .ArribaSlider { top:5%; }
    .AbajoSlider { bottom:5%; }
    .DerechaSlider { right:5%; }
    .IzquierdaSlider { left:5%; }

    .CajaTextoSlider { background-color: #00000087; padding: 10px 20px; }
      .CajaTextoSlider > h2 { color:#FFFFFF; margin:0; } /* titulo del slider */
      .CajaTextoSlider > p {  } /* subtitulo del slider */
      .CajaTextoSlider > a {  } /* boton del slider */

  .DosDiapositivas { animation: transicionSlider2 10s infinite alternate linear; }
  .TresDiapositivas { animation: transicionSlider3 15s infinite alternate linear; }
  .CuatroDiapositivas { animation: transicionSlider4 20s infinite alternate linear; }
  .CincoDiapositivas { animation: transicionSlider5 25s infinite alternate linear; }
  .SeisDiapositivas { animation: transicionSlider6 30s infinite alternate linear; }

    @keyframes transicionSlider2 {
        0% { margin-left: 0; }
        50% { margin-left: 0; }
        
        55% { margin-left: -100%; }
        100% { margin-left: -100%; }
    }

    @keyframes transicionSlider3 {
        0% { margin-left: 0; }
        30% { margin-left: 0; }
        
        33% { margin-left: -100%; }
        60% { margin-left: -100%; }
        
        66% { margin-left: -200%; }
        100% { margin-left: -200%; }
    }

    @keyframes transicionSlider4 {
        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%; }
        100% { margin-left: -300%; }
    }

    @keyframes transicionSlider5 {
        0% { margin-left: 0; }
        15% { margin-left: 0; }
        
        20% { margin-left: -100%; }
        35% { margin-left: -100%; }
        
        40% { margin-left: -200%; }
        55% { margin-left: -200%; }
        
        60% { margin-left: -300%; }
        75% { margin-left: -300%; }
        
        80% { margin-left: -400%; }
        100% { margin-left: -400%; }
    }

    @keyframes transicionSlider6 {
        0% { margin-left: 0; }
        10% { margin-left: 0; }
        
        15% { margin-left: -100%; }
        25% { margin-left: -100%; }
        
        30% { margin-left: -200%; }
        40% { margin-left: -200%; }
        
        45% { margin-left: -300%; }
        65% { margin-left: -300%; }
        
        70% { margin-left: -400%; }
        80% { margin-left: -400%; }
        
        85% { margin-left: -500%; }
        100% { margin-left: -500%; }
    }




  /* PseudoSlider psinonva */

  /* html
  <div class="PseudoSlider Einstein">

    <img class="ImgPseudoSlider Tesla DesktopSolid" src="ficheros/Diapositiva/<?php echo $FotoDiapositiva?>" />
    <img class="ImgPseudoSlider Tesla MobileSolid" src="ficheros/Diapositiva/<?php echo $Foto2Diapositiva?>" />

    <div class="TextoPseudoSlider">
      <div class="ApoyoTextoPseudoSlider">
        <p><?php echo $TituloDiapositiva?></p>
        <p class="NegritaBlack"><?php echo $SubtituloDiapositiva?></p>
        <?php if($EnlaceBotonDiapositiva!=""){?>
        <span><a href="<?php echo $EnlaceBotonDiapositiva?>" class="BotonesSlider Boton1Slider"><?php echo $TextoBotonDiapositiva?></a>
        <?php }?>
        <?php if($EnlaceBoton2Diapositiva!=""){?>
        <a href="<?php echo $EnlaceBoton2Diapositiva?>" class="BotonesSlider Boton2Slider" target="_blank"><?php echo $TextoBoton2Diapositiva?></a>
        <?php }?>
        </span>
      </div>
    </div>

  </div> <!-- fin PseudoSlider -->
  */
    .TextoPseudoSlider { position: absolute; top: 0; left: 0; display: flex; flex-wrap: wrap; flex-direction: column; -webkit-flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; }
        .ApoyoTextoPseudoSlider { position: relative; top: 20%; /* right: 15%; */ max-width:1200px; text-align:left; }
            .ApoyoTextoPseudoSlider p { font-size:3em; color:#FFFFFF; margin: 0 0 20px; line-height: 1em }
            .ApoyoTextoPseudoSlider span { display: block; margin-top: 0px; }

        .ApoyoTextoPseudoSliderSubcategoria { text-align:center; }
            .ApoyoTextoPseudoSliderSubcategoria p { font-size:2em; color:#FFFFFF; margin: 0 0 20px; font-weight:bold; }

        .BotonesSlider { display:inline-block; border-radius:25px; font-size: 0.9em; }
        .BotonesSlider:hover { text-decoration: none; }
            .Boton1Slider { background-color:#cc0000; border:1px solid #cc0000; color:#FFFFFF; margin:15px 20px 0 0; padding: 7px 22px; }
            .Boton1Slider:hover { background-color:#FFFFFF; border:1px solid #FFFFFF; color:#cc0000; }
            .Boton2Slider { background-color:transparent; border:1px solid #FFFFFF; color:#FFFFFF; padding: 7px 43px; }
            .Boton2Slider:hover { background-color:#FFFFFF; border:1px solid transparent; padding: 7px 43px; color:#000; }


    @media screen and (min-width:951px) and (max-width:1250px) {
        .ApoyoTextoPseudoSlider { right: 0%; }
    }



    @media screen and (max-width:950px) {
        .ApoyoTextoPseudoSlider { position: relative; top: 0; right: 0; text-align:center; }
            .ApoyoTextoPseudoSlider p { font-size:1.6em; color:#FFFFFF; margin: 0; }
            .ApoyoTextoPseudoSlider span { display: block; margin-top: 5px; }

        .ApoyoTextoPseudoSliderSubcategoria { text-align:center; position: relative; right: 17%; }
            .ApoyoTextoPseudoSliderSubcategoria p { font-size:1.5em; color:#FFFFFF; }

            .Boton1Slider { margin:15px 20px 0 0; padding: 4px 10px; }
            .Boton2Slider { padding: 4px 20px; }
    }
    .EnlaceSlider { color:#FFFFFF; text-decoration:underline; }
    .EnlaceSlider:hover {  color:#dedede;text-decoration:none; }
    /* _PseudoSlider */



    /* mensaje alerta */
      /* html
        <?php 
            $Flag = $_REQUEST['Flag'];

            switch ($Flag) {
                case "1":
                    $TextoAlertaLogin="El nombre de usuario o la contraseña son incorrectos";
                    $ColorAlertaLogin="Rojo";
                    break;
                case "2":
                    $TextoAlertaLogin="El email que ha introducido ya existe en nuestra base de datos";
                    $ColorAlertaLogin="Rojo";
                    break;
                case "3":
                    $TextoAlertaLogin="El registro se ha completado correctamente<br />Introduzca sus datos a continuación para iniciar sesión";
                    $ColorAlertaLogin="Verde";
                    break;
                case "4":
                    $TextoAlertaLogin="Le hemos enviado un email con las intrucciones a seguir para recuperar su contraseña";
                    $ColorAlertaLogin="Verde";
                    break;
                case "5":
                    $TextoAlertaLogin="Ha ocurrido un error al procesar su petición de recuperación de contraseña. Por favor vuelva a intentarlo";
                    $ColorAlertaLogin="Rojo";
                    break;
                case "6":
                    $TextoAlertaLogin="El email que ha introducido no existe";
                    $ColorAlertaLogin="Rojo";
                    break;
                case "7":
                    $TextoAlertaLogin="La contraseña se ha cambiado correctamente.<br />Vuelva a introducirla a continucación para iniciar sesión";
                    $ColorAlertaLogin="Verde";
                    break;
                case "8":
                    $TextoAlertaLogin="Es obligatorio haber iniciado sesión para poder acceder a esa página. Inicie sesión y se le redirigirá a la página a la que intentaba acceder";
                    $ColorAlertaLogin="Rojo";
                    break;
                default:
                  $TextoAlertaLogin="Se ha producido un error inesperado";
                    $ColorAlertaLogin="Rojo";
                    break;
            }

            if ($Flag<>"") { 
          ?>
          <div class="ContenedorAlertaLogin Alerta<?php echo $ColorAlertaLogin ?>">
            <p class="Letra12 Xcenter"><?php echo $TextoAlertaLogin ?></p>
          </div>
          <?php 
            }
          ?>
      */
    .ContenedorAlertaLogin { width: 100%; max-width: 500px; padding: 25px 10px; margin: -30px auto 30px auto; }
    .ContenedorAlertaLogin p { margin:0; }

  .AlertaVerde { border:2px solid #018001; }
    .AlertaVerde p { color:#018001; }
  .AlertaRojo { border:2px solid #d30000; }
    .AlertaRojo p { color:#d30000; }


    /* Estructura */
  .col1 { width:8.33333333%; min-height: 1px; }
  .col2 { width:16.66666667%;  min-height: 1px; }
  .col3 { width:25%;  min-height: 1px; }
  .col4 { width:33.33333333%;  min-height: 1px; }
  .col5 { width:41.66666667%;  min-height: 1px; }
  .col6 { width:50%;  min-height: 1px; }
  .col7 { width:58.33333333%;  min-height: 1px; }
  .col8 { width:66.66666667%;  min-height: 1px; }
  .col9 { width:75%;  min-height: 1px; }
  .col10 { width:83.33333333%;  min-height: 1px; }
  .col11 { width:91.66666667%;  min-height: 1px; }
  .col12 { width:100%;  min-height: 1px; }
  .Margen { padding-right: 15px; padding-left: 15px; }

    /* Estructura forms */
    .MagicForm { display:flex; display:-webkit-flex; flex-wrap: wrap; flex-direction:row; -webkit-flex-direction:row; align-items:center; justify-content: space-evenly; }

    .Completo { width:96%; }
    .Mitad { width:46%; }
    .Tercio { width:29%; }
    .Cuarto { width:21%; }
    .Quinto { width:16%; }

    @media screen and (max-width:748px) {
      .Mitad { width:96%; }
      .Tercio { width:96%; }
      .Cuarto { width:46%; }
      .Quinto { width:46%; }
    }

        /* cambiar color placeholder. Colocar clase en el form */
        .PlaceholderNegro input::placeholder { color: #000000; }
        .PlaceholderNegro select { color: #000000; }
        .PlaceholderNegro textarea::placeholder { color: #000000; }
  
    

    /* Modulos */
      /* Modulo 2 columnas - responsive 1  */
      .ContenedorModulo2col {  }
      .ContenedorModulo2col > div { width:50%; padding:0 25px; }

    @media screen and (max-width:748px) {
      .ContenedorModulo2col > div { width:100%; }
    }

      /* Modulo 2 columnas - responsive 1  */
      .ContenedorModulo2colRaw {  }
      .ContenedorModulo2colRaw > div { width:50%; }

    @media screen and (max-width:748px) {
      .ContenedorModulo2colRaw > div { width:100%; }
    }


      /* Modulo 3 columnas - responsive 2, 1  */
      .ContenedorModulo3col {  }
      .ContenedorModulo3col > div { width:31.333%; margin:0 1% 20px 1%; }

    @media screen and (min-width:451px) and (max-width:748px) {
          .ContenedorModulo3col > div { width:46%; margin:0 2% 20px 2%; }
      }

      @media screen and (max-width:450px) {
      .ContenedorModulo3col > div { width:98%; margin:0 1% 20px 1%; }
    }

    /* Modulo 3 columnas - responsive 2, 1  */
      .ContenedorModulo3colRaw {  }
      .ContenedorModulo3colRaw > div { width:33.333%; }

    @media screen and (min-width:651px) and (max-width:748px) {
          .ContenedorModulo3colRaw > div { width:50%; }
      }

      @media screen and (max-width:650px) {
      .ContenedorModulo3colRaw > div { width:100%; }
    }

    /* Modulo 3 columnas - responsive 2, 1  */
      .ContenedorModulo3colSlider {  }
      .ContenedorModulo3colSlider > div { width:30%; }
      .ContenedorModulo3colSlider > div:first-child { width:40%; }

    @media screen and (max-width:748px) {
      .ContenedorModulo3colSlider > div { width:100%; }
      .ContenedorModulo3colSlider > div:first-child { width:100%; }
    }


    /* Modulo 4 columnas - responsive 3, 2, 1 */
    .ContenedorModulo4col {  }
      .ContenedorModulo4col > div { width:23%; margin:0 1% 20px 1%; }

    @media screen and (min-width:749px) and (max-width:950px) {
          .ContenedorModulo4col > div { width:31.333%; margin:0 1% 20px 1%; }
      }

      @media screen and (min-width:451px) and (max-width:748px) {
          .ContenedorModulo4col > div { width:46%; margin:0 2% 20px 2%; }
      }

      @media screen and (max-width:450px) {
      .ContenedorModulo4col > div { width:98%; margin:0 1% 20px 1%; }
    }

    /* Modulo 4 columnas - responsive 3, 2, 1 */
    .ContenedorModulo4colRaw {  }
      .ContenedorModulo4colRaw > div { width:25%; margin:0; }

    @media screen and (min-width:749px) and (max-width:950px) {
          .ContenedorModulo4colRaw > div { width:33.333%; margin:0; }
      }

      @media screen and (min-width:451px) and (max-width:748px) {
          .ContenedorModulo4colRaw > div { width:50%; margin:0; }
      }

      @media screen and (max-width:450px) {
      .ContenedorModulo4colRaw > div { width:100%; margin:0; }
    }

    /* Modulo 4 columnas - responsive 2, 1 */
    .ContenedorModulo4colEsp {  }
      .ContenedorModulo4colEsp > div { width:23%; margin:0 1% 20px 1%; }
    @media screen and (min-width:451px) and (max-width:798px) {
          .ContenedorModulo4colEsp > div { width:46%; margin:0 2% 20px 2%; }
      }

      @media screen and (max-width:450px) {
      .ContenedorModulo4colEsp > div { width:98%; margin:0 1% 20px 1%; }
    }

    /* Modulo 4 columnas - responsive 2, 1 */
    .ContenedorModulo4colEspRaw {  }
      .ContenedorModulo4colEspRaw > div { width:25%; }
    @media screen and (min-width:651px) and (max-width:1098px) {
          .ContenedorModulo4colEspRaw > div { width:50%; }
      }

      @media screen and (max-width:650px) {
      .ContenedorModulo4colEspRaw > div { width:100%; }
    }

    /* Modulo 5 columnas - responsive 4, 3, 2 */
    .ContenedorModulo5col {  }
      .ContenedorModulo5col > div { width:18%; margin:0 1% 20px 1%; }

    @media screen and (min-width:749px) and (max-width:950px) {
          .ContenedorModulo5col > div { width:23%; margin:0 1% 20px 1%; }
      }

      @media screen and (min-width:451px) and (max-width:748px) {
          .ContenedorModulo5col > div { width:31.333%; margin:0 1% 20px 1%; }
      }

      @media screen and (max-width:450px) {
      .ContenedorModulo5col > div { width:48%; margin:0 1% 20px 1%; }
    }

    /* Modulo 6 columnas - responsive 4, 3, 2 */
    .ContenedorModulo6col {  }
      .ContenedorModulo6col > div { width:14.666%; margin:0 1% 20px 1%; }

    @media screen and (min-width:749px) and (max-width:950px) {
          .ContenedorModulo6col > div { width:23%; margin:0 1% 20px 1%; }
      }

      @media screen and (min-width:451px) and (max-width:748px) {
          .ContenedorModulo6col > div { width:31.333%; margin:0 1% 20px 1%; }
      }

      @media screen and (max-width:450px) {
      .ContenedorModulo6col > div { width:48%; margin:0 1% 20px 1%; }
    }


      /* Contenedores */
      /* HTML
        <div class="ContenedorMagico MagicNumcol">
          <div class="">elemento 1</div>
          <div class="">elemento 2</div>
          <div class="">elemento n</div>
        </div>
      _HTML */
      .ContenedorMagico { display:flex; display:-webkit-flex; flex-wrap: wrap; flex-direction:row; -webkit-flex-direction:row; align-items:center; justify-content: space-evenly; }
        .Magic3col > div { width:31.3333%; margin:0 1% 15px 1%;  }
        .Magic4col > div { width:23%; margin:0 1% 15px 1%; }
        .Magic5col > div { width:18%; margin:0 1% 15px 1%; }
        .Magic6col > div { width:14.6666%; margin:0 1% 15px 1%; }
        .Magic7col > div { width:12%; margin:0 1% 15px 1%; }
        .Magic8col > div { width:10%; margin:0 1% 15px 1%; }
        .Magic9col > div { width:9%; margin:0 1% 15px 1%; }
        .Magic10col > div { width:8%; margin:0 1% 15px 1%; }


        @media screen and (min-width:1049px) and (max-width:1248px) {
          .Magic9col > div { width:14.6666%; margin:0 1% 15px 1%; }     
        }

        @media screen and (min-width:749px) and (max-width:1048px) {
          .Magic9col > div { width:23%; margin:0 1% 15px 1%; }      
        }

        @media screen and (min-width:451px) and (max-width:748px) {
          .Magic3col > div { width:48%; margin:0 1% 15px 1%; }
          .Magic4col > div { width:48%; margin:0 1% 15px 1%; }
          .Magic5col > div { width:48%; margin:0 1% 15px 1%; }
          .Magic6col > div { width:48%; margin:0 1% 15px 1%; }
          .Magic7col > div { width:48%; margin:0 1% 15px 1%; }
          .Magic8col > div { width:48%; margin:0 1% 15px 1%; }
          .Magic9col > div { width:48%; margin:0 1% 15px 1%; }
          .Magic10col > div { width:48%; margin:0 1% 15px 1%; }
        }

        @media screen and (max-width:450px) { 
          .Magic3col > div { width:98%; margin:0 1% 15px 1%; }
          .Magic4col > div { width:98%; margin:0 1% 15px 1%; }
          .Magic5col > div { width:98%; margin:0 1% 15px 1%; }
          .Magic6col > div { width:98%; margin:0 1% 15px 1%; }
          .Magic7col > div { width:98%; margin:0 1% 15px 1%; }
          .Magic8col > div { width:98%; margin:0 1% 15px 1%; }
          .Magic9col > div { width:98%; margin:0 1% 15px 1%; }
          .Magic10col > div { width:98%; margin:0 1% 15px 1%; }
        }



    .Bloqueado { filter: grayscale(100%); } /* añadir a la imagen para que sea en escala de grises */




    /* custom radio button */
    /* html:
      <div class="radio-item"> <!-- radio-item-horizontal para ponerlo en horizontal -->
          <input type="radio" id="ritemb" name="ritem" value="ropt2">
          <label for="ritemb">Option 2</label>
      </div>
    */
    .radio-item {
      position: relative;
      padding: 0 6px;
      margin: 15px 7px 0 7px;
    }

    .radio-item input[type='radio'] {
      display: none;
    }

    .radio-item label {
      color: #666;
      font-weight: 300;
    }

    .radio-item label:before {
      content: " ";
      display: inline-block;
      position: absolute;
      top: -21px;
      margin: 0 5px 0 0;
      width: 14px;
      height: 14px;
      border-radius: 11px;
      border: 2px solid #97582f;
      background-color: transparent;
      left: 50%;
    }

    .radio-item input[type=radio]:checked + label:after {
      border-radius: 11px;
      width: 12px;
      height: 12px;
      position: absolute;
      bottom: 24px;
      left: calc(50% + 3px);
      content: " ";
      display: block;
      background: #e8621e;
    }



    .radio-item-horizontal {
      position: relative;
      padding: 0 6px;
      margin: 15px 7px 0 7px;
    }

    .radio-item-horizontal input[type='radio'] {
      display: none;
    }

    .radio-item-horizontal label {
      color: #666;
      font-weight: 300;
      padding-left: 21px;
    }

    .radio-item-horizontal label:before {
      content: " ";
      display: inline-block;
      position: absolute;
      top: 0px;
      margin: 0 5px 0 0;
      width: 14px;
      height: 14px;
      border-radius: 11px;
      border: 2px solid #97582f;
      background-color: transparent;
      left: 0;
    }

    .radio-item-horizontal input[type=radio]:checked + label:after {
      border-radius: 11px;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 3px;
      left: 3px;
      content: " ";
      display: block;
      background: #e8621e;
    }




   


    /* flip cards */
    /* html 
    <div class="boxesContainer">

      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Card One</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Back Side One</h3>
            <p>Content in card one</p>
            <a href="#">Button 1</a>
          </div>
        </div>
      </div>

      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Card Two</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Back Side Two</h3>
            <p>Content in card two</p>
            <a href="#">Button 2</a>
          </div>
        </div>
      </div>

      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Card Three</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Back Side Three</h3>
            <p>Content in card three</p>
            <a href="#">Button 3</a>
          </div>
        </div>
      </div>

      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Card Four</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Back Side Four</h3>
            <p>Content in card four</p>
            <a href="#">Button 4</a>
          </div>
        </div>
      </div>

    </div>
    <!--.boxesContainer-->
  */

  /* .cardBox {
  float: left;
  font-size: 1.2em;
  margin: 1% 0 0 1%;
  perspective: 800px;
  transition: all 0.3s ease 0s;
  width: 23.7%;
}

.cardBox:hover .card {
  transform: rotateY( 180deg);
}

.card {
  background: #222;
  cursor: default;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease 0s;
  width: 100%;
  -webkit-animation: giro 1s 1;
  animation: giro 1s 1;
}

.card p {
  margin-bottom: 1.8em;
}

.card .front,
.card .back {
  backface-visibility: hidden;
  box-sizing: border-box;
  color: white;
  display: block;
  font-size: 1.2em;
  height: 100%;
  padding: 0.8em;
  position: absolute;
  text-align: center;
  width: 100%;
}

.card .front strong {
  background: #fff;
  border-radius: 100%;
  color: #222;
  font-size: 1.5em;
  line-height: 30px;
  padding: 0 7px 4px 6px;
}

.card .back {
  transform: rotateY( 180deg);
}

.card .back a {
  padding: 0.3em 0.5em;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 1px;
  font-size: 0.9em;
  transition: all 0.2s ease 0s;
}

.card .back a:hover {
  background: #fff;
  color: #333;
  text-shadow: 0 0 1px #333;
}

.cardBox:nth-child(1) .card .back {
  background: cornflowerblue;
}

.cardBox:nth-child(2) .card .back {
  background: orange;
}

.cardBox:nth-child(3) .card .back {
  background: yellowgreen;
}

.cardBox:nth-child(4) .card .back {
  background: tomato;
}

.cardBox:nth-child(2) .card {
  -webkit-animation: giro 1.5s 1;
  animation: giro 1.5s 1;
}

.cardBox:nth-child(3) .card {
  -webkit-animation: giro 2s 1;
  animation: giro 2s 1;
}

.cardBox:nth-child(4) .card {
  -webkit-animation: giro 2.5s 1;
  animation: giro 2.5s 1;
} */

/* @-webkit-keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@media screen and (max-width: 767px) {
  .cardBox {
    margin-left: 2.8%;
    margin-top: 3%;
    width: 46%;
  }
  .card {
    height: 285px;
  }
  .cardBox:last-child {
    margin-bottom: 3%;
  }
}

@media screen and (max-width: 480px) {
  .cardBox {
    width: 94.5%;
  }
  .card {
    height: 260px;
  }
} */


/* custom checkbox - fondo blanco check azul */
  
  /* Customize the label (the container) * /
  .container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /*font-size: 22px;* /
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  } 

  /* Hide the browser's default checkbox * /
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom checkbox * /
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    border: 1px solid #c1c1c1;
  }

  /* On mouse-over, add a grey background color * /
  .container:hover input ~ .checkmark {
    background-color: #ddd;
  }

  /* When the checkbox is checked, add a blue background * /
  .container input:checked ~ .checkmark {
    border: 1px solid #00A4E5;
  }

  /* Create the checkmark/indicator (hidden when not checked) * /
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked * /
  .container input:checked ~ .checkmark:after {
    display: block;
  }

  /* Style the checkmark/indicator * /
  .container .checkmark:after {
    left: 5px;
    top: 2px;
    width: 3px;
    height: 8px;
    border: solid #00a4e5;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  } 




/* custom checkbox 2 - fondo transparente check blanco */

  /* Create a custom checkbox * /
  .checkmark2 {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: transparent;
    border: 1px solid #FFFFFF;
  }

  /* On mouse-over, add a grey background color * /
  .container:hover input ~ .checkmark2 {
    background-color: #dddddd78;
  }

  /* When the checkbox is checked, add a blue background * /
  .container input:checked ~ .checkmark2 {
    border: 1px solid #FFFFFF;
  }

  /* Create the checkmark/indicator (hidden when not checked) * /
  .checkmark2:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked * /
  .container input:checked ~ .checkmark2:after {
    display: block;
  }

  /* Style the checkmark/indicator * /
  .container .checkmark2:after {
    left: 5px;
    top: 2px;
    width: 3px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }