/*
**
**
**
** CSS para resolución 1280 x 720px
**
**
**
*/

h1 { font-size: 4.0rem; }
h2 { font-size: 2.5rem; color: #ffffff; }
h3 { font-size: 2rem; font-weight: bold; color: #005eb8; }
p { font-size: 1.3rem; font-family: 'EatonReg'; }

/* Fondos */
body#home,
body#formulario,
body#enlaces {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: url('../images/bg-home.jpg') no-repeat center center fixed;
    background-size: cover;
}

body#sector_distribucion-electrica {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: url('../images/bg-distribucion-electrica.jpg') no-repeat center center fixed;
    background-size: cover;
}
body#sector_control-industrial {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: url('../images/bg-control-industrial.jpg') no-repeat center center fixed;
    background-size: cover;
}
body#sector_calidad-de-energia {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: url('../images/bg-calidad-de-energia.jpg') no-repeat center center fixed;
    background-size: cover;
}


/* Sectores */
#sectores {
    font-family: 'EatonBol';
}

#sectores .btn { font-size: 25px; border-radius: 10px; width: 70%; padding: 10px; }

/* Sectores - Circunferencia de fondo de iconos */
#sectores .back-distribucion-electrica {
    background-color: #ed8b00;
    border-color: #ed8b00;
    border-radius: 50%;
    width: 15rem;
    height: 15rem;
    margin: 2rem 0 0 2.9rem;
    position: absolute;
    z-index: -1;
}
#sectores .back-control-industrial {
    background-color: #00b2a9;
    border-color: #00b2a9;
    border-radius: 50%;
    width: 15rem;
    height: 15rem;
    margin: 2rem 0 0 2.9rem;
    position: absolute;
    z-index: -1;
}
#sectores .back-calidad-de-energia {
    background-color: #005eb8;
    border-color: #005eb8;
    border-radius: 50%;
    width: 15rem;
    height: 15rem;
    margin: 2rem 0 0 2.9rem;
    position: absolute;
    z-index: -1;
}


/* Sector - Circunferencia transparente de fondo */
#sector .back-sector-icon {
    border-radius: 50%;
    width: 22rem;
    height: 22rem;
    margin: 30px 0 0 75px;
    position: absolute;
    z-index: -1;
    background: #ffffff1c;
    filter: saturate(0.5);
}


/* Sector - Botón de Volver */
#sector .btn-volver,
#sector .btn-volver:hover,
#sector .btn-volver:active { 
    background: none !important; 
    padding: 15px; 
    border: solid 2px #fff !important; 
    border-radius: 10px; color: #fff !important; 
    font-size: 22px; font-family: 'EatonBol'; 
}

/* Sectores/Sector - Botones de Iconos */
.btn-distribucion-electrica,
.btn-distribucion-electrica:hover,
.btn-distribucion-electrica:active {
    background-color: #ed8b00;
    border-color: #ed8b00;
}
.btn-control-industrial,
.btn-control-industrial:hover,
.btn-control-industrial:active {
    background-color: #00b2a9;
    border-color: #00b2a9;
}
.btn-calidad-de-energia,
.btn-calidad-de-energia:hover,
.btn-calidad-de-energia:active {
    background-color: #005eb8;
    border-color: #005eb8;
}


/* Sector - Animación botón */
#sector .btn { position: relative; }

#sector .btn-distribucion-electrica {
  animation: pulse-distribucion-electrica 2s infinite;
}
#sector .btn-control-industrial {
  animation: pulse-control-industrial 2s infinite;
}
#sector .btn-calidad-de-energia {
  animation: pulse-calidad-de-energia 2s infinite;
}

@keyframes pulse-distribucion-electrica {
  0% {
    box-shadow: 0 0 0 0 #ed8b00;
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

@keyframes pulse-control-industrial {
  0% {
    box-shadow: 0 0 0 0 #00b2a9;
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

@keyframes pulse-calidad-de-energia {
  0% {
    box-shadow: 0 0 0 0 #005eb8;
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}


/* Sector - Ubicacióbn de los botones de productos */
.btn-producto-1 { top: -370px; left: -40px; }
.btn-producto-2 { top: -350px; left: 0px; }
.btn-producto-3 { top: -430px; left: 40px; }
.btn-producto-4 { top: -335px; left: -130px; }
.btn-producto-5 { top: -500px; left: -100px; }
.btn-producto-6 { top: -345px; left: -110px; }
.btn-producto-7 { top: -483px; left: 135px; }
.btn-producto-8 { top: -450px; left: 364px; }
.btn-producto-9 { top: -240px; left: 0px; }
.btn-producto-10 { top: -230px; left: 13px; }
.btn-producto-11 { top: -430px; left: 415px; }
.btn-producto-12 { top: -380px; left: 180px; }
.btn-producto-13 { top: -330px; left: -52px; }
.btn-producto-14 { top: -230px; left: 60px; }
.btn-producto-15 { top: -260px; left: 75px; }
.btn-producto-16 { top: -415px; left: -200px; }
.btn-producto-17 { top: -350px; left: -100px; }
.btn-producto-18 { top: -440px; left: 180px; }

.btn-producto-19 { top: -308px; left: 0px; }
.btn-producto-20 { top: -372px; left: -128px; }
.btn-producto-21 { top: -430px; left: 40px; }
.btn-producto-22 { top: -475px; left: -80px; }
.btn-producto-23 { top: -450px; left: 290px; }
.btn-producto-24 { top: -420px; left: 300px; }
.btn-producto-25 { top: -402px; left: -40px; }
.btn-producto-26 { top: -350px; left: -300px; }
.btn-producto-27 { top: -444px; left: 370px; }
.btn-producto-28 { top: -332px; left: 156px; }
.btn-producto-29 { top: -376px; left: -50px; }
.btn-producto-30 { top: -700px; left: -15px; }
.btn-producto-31 { top: -725px; left: -327px; }
.btn-producto-32 { top: -270px; left: 60px; }
.btn-producto-33 { top: -310px; left: 75px; }
.btn-producto-34 { top: -504px; left: 337px; }
.btn-producto-35 { top: -300px; left: 110px; }
.btn-producto-36 { top: -440px; left: 30px; }
.btn-producto-37 { top: -436px; left: 137px; }
.btn-producto-38 { top: -432px; left: 9px; }
.btn-producto-39 { top: -830px; left: 215px; }

.btn-producto-40 { top: -326px; left: 87px; }
.btn-producto-41 { top: -380px; left: 90px; }
.btn-producto-42 { top: -305px; left: 49px; }
.btn-producto-43 { top: -385px; left: 10px; }
.btn-producto-44 { top: -305px; left: 0px; }
.btn-producto-45 { top: -327px; left: -40px; }
.btn-producto-46 { top: -172px; left: 135px; }
.btn-producto-47 { top: -292px; left: -41px; }
.btn-producto-48 { top: -192px; left: 70px; }
.btn-producto-49 { top: -274px; left: 130px; }
.btn-producto-50 { top: -330px; left: 0px; }


/* Modal - Cuerpo */
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 1100px;
    }

    .modal-content {
        border-radius: 1rem;
    }
}

/* Modal - Producto */
body#producto {
    color: #000;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: #fff;
}

body#producto #qr h2 {
    color: #fff;
    font-size: 20px;
}

body#producto #qr .fondo_qr_azul {
    height: 6rem;
    margin: 1rem 0 -15rem 0;
    background-color: #005eb8;
    z-index: -1;
    border-radius: 10px;
    color: #fff !important;
}