/*
**
**
**
** CSS para resolución 1920 x 1080px
**
**
**
*/

h1 { font-size: 4.0rem; }
h2 { font-size: 2.5rem; color: #ffffff; }
h3 { font-size: 2.5rem; font-weight: bold; color: #005eb8; }
p { font-size: 1.8rem; 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_infraestructura {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: url('../images/bg-infraestructura.jpg') no-repeat center center fixed;
    background-size: cover;
}
body#sector_industria {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: url('../images/bg-industria.jpg') no-repeat center center fixed;
    background-size: cover;
}
body#sector_datacenter {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: url('../images/bg-datacenter.jpg') no-repeat center center fixed;
    background-size: cover;
}


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

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

/* Sectores - Circunferencia de fondo de iconos */
#sectores .back-infraestructura {
    background-color: #ed8b00;
    border-color: #ed8b00;
    border-radius: 50%;
    width: 280px;
    height: 280px;
    margin: 30px 60px 60px 60px;
    position: absolute;
    z-index: -1;
}
#sectores .back-industria {
    background-color: #00b2a9;
    border-color: #00b2a9;
    border-radius: 50%;
    width: 280px;
    height: 280px;
    margin: 30px 60px 60px 60px;
    position: absolute;
    z-index: -1;
}
#sectores .back-datacenter {
    background-color: #005eb8;
    border-color: #005eb8;
    border-radius: 50%;
    width: 280px;
    height: 280px;
    margin: 30px 60px 60px 60px;
    position: absolute;
    z-index: -1;
}


/* Sector - Circunferencia transparente de fondo */
#sector .back-sector-icon {
    border-radius: 50%;
    width: 600px;
    height: 600px;
    margin: 40px 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-infraestructura,
.btn-infraestructura:hover,
.btn-infraestructura:active {
    background-color: #ed8b00;
    border-color: #ed8b00;
}
.btn-industria,
.btn-industria:hover,
.btn-industria:active {
    background-color: #00b2a9;
    border-color: #00b2a9;
}
.btn-datacenter,
.btn-datacenter:hover,
.btn-datacenter:active {
    background-color: #005eb8;
    border-color: #005eb8;
}


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

#sector .btn-infraestructura {
  animation: pulse-infraestructura 2s infinite;
}
#sector .btn-industria {
  animation: pulse-industria 2s infinite;
}
#sector .btn-datacenter {
  animation: pulse-datacenter 2s infinite;
}

@keyframes pulse-infraestructura {
  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-industria {
  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-datacenter {
  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: -700px; left: 0px; }
.btn-producto-2 { top: -730px; left: 100px; }
.btn-producto-3 { top: -670px; left: 190px; }
.btn-producto-4 { top: -676px; left: -130px; }
.btn-producto-5 { top: -690px; left: 500px; }
.btn-producto-6 { top: -657px; left: -426px; }
.btn-producto-7 { top: -633px; left: -132px; }
.btn-producto-8 { top: -806px; left: 12px; }
.btn-producto-9 { top: -574px; left: -467px; }
.btn-producto-10 { top: -376px; left: 100px; }
.btn-producto-11 { top: -285px; left: -46px; }
.btn-producto-12 { top: -694px; left: 125px; }
.btn-producto-13 { top: -594px; left: -59px; }
.btn-producto-14 { top: -672px; left: 210px; }
.btn-producto-15 { top: -596px; left: -5px; }
.btn-producto-16 { top: -550px; left: -65px; }
.btn-producto-17 { top: -580px; left: 473px; }
.btn-producto-18 { top: -490px; left: 100px; }

.btn-producto-19 { top: -600px; left: 0px; }
.btn-producto-20 { top: -670px; left: 0px; }
.btn-producto-21 { top: -690px; left: 40px; }
.btn-producto-22 { top: -675px; left: 497px; }
.btn-producto-23 { top: -614px; left: 140px; }
.btn-producto-24 { top: -635px; left: -114px; }
.btn-producto-25 { top: -567px; left: -403px; }
.btn-producto-26 { top: -751px; left: 154px; }
.btn-producto-27 { top: -631px; left: 268px; }
.btn-producto-28 { top: -568px; left: 0px; }
.btn-producto-29 { top: -597px; left: -115px; }
.btn-producto-30 { top: -599px; left: -85px; }
.btn-producto-31 { top: -539px; left: 212px; }
.btn-producto-32 { top: -568px; left: -70px; }
.btn-producto-33 { top: -580px; left: 0px; }
.btn-producto-34 { top: -540px; left: 0px; }
.btn-producto-35 { top: -487px; left: 125px; }
.btn-producto-36 { top: -417px; left: -132px; }
.btn-producto-37 { top: -611px; left: 304px; }
.btn-producto-38 { top: -559px; left: 61px; }
.btn-producto-39 { top: -491px; left: -114px; }

.btn-producto-40 { top: -528px; left: 44px; }
.btn-producto-41 { top: -600px; left: 77px; }
.btn-producto-42 { top: -564px; left: 100px; }
.btn-producto-43 { top: -484px; left: -21px; }
.btn-producto-44 { top: -524px; left: 217px; }
.btn-producto-45 { top: -397px; left: 30px; }
.btn-producto-46 { top: -415px; left: 34px; }
.btn-producto-47 { top: -301px; left: -26px; }
.btn-producto-48 { top: -225px; left: 49px; }
.btn-producto-49 { top: -293px; left: -37px; }
.btn-producto-50 { top: -495px; left: 240px; }


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

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

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

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

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