#contenedor,
#display,
#divvolver,
#teclado button {
    box-sizing: border-box
}

#publiabajo,
#publidcha,
#publiizda {
    display: none
}

#publidcha,
#publiizda,
#publitop {
    margin: 0;
    position: absolute;
    top: 0
}

#entradadatos>p,
#num1,
#num2 {
    font-size: 90px;
    color: #ddd
}

#datos,
#publiizda {
    left: 0
}

#botexp,
#botnor,
#entradadatos,
#num1,
#num2,
#teclado button,
#volver,
.botonenlace,
.perror {
    text-align: center
}

#display,
#dondetodosucede {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden
}

#tcal,
#tpri,
#trai,
.botonenlace,
a:nth-child(2)>.botonenlace {
    background-color: #6f6
}

#t0,
#tpan {
    width: 40%
}

#display,
#num1,
#num2,
#salida {
    background-color: #111
}

#divvolver,
#entradadatos>p,
#publiabajo,
#publiabajo>a,
#publidcha,
#publiizda,
#publitop {
    background-color: transparent
}

#atwitter,
#volver {
    display: inline-block
}

body {
    line-height: 1.2 !important
}

#publidcha,
#publitop {
    right: 0
}

#publiabajo {
    position: absolute;
    width: 100%
}

#publiabajo>a {
    display: block;
    cursor: pointer;
    height: 100%;
    background-image: url(img/descubre_cientificas_casio_org_720x240Blanco.png);
    background-position: center;
    background-size: 100%
}

#publiabajo>a:hover {
    background-image: url(img/descubre_cientificas_casio_org_720x240Rojo.png)
}

#publiabajo img,
#publidcha img,
#publiizda img,
#publitop img {
    width: 100%;
    cursor: pointer
}

#contenedor {
    position: relative;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    padding: 5px
}



#salida,
#teclado {
    height: 100%;
    transition: top .5s;
    width: 100%;
    -webkit-transition: top .5s;
    position: absolute
}

#entradadatos>p {
    margin-bottom: 20px
}

#num1,
#num2 {
    border: none;
    border-radius: 4px
}

#num1 {
    width: 320px
}

#num2 {
    width: 220px
}

#num1:focus,
#num2:focus {
    background-color: #222
}

#entradadatos>p>button {
    position: relative;
    height: 101px;
    width: 101px;
    background-color: #4db84d;
    color: #eee;
    border: none;
    font-size: 20px;
    transform: rotate(5deg);
    -webkit-transform: rotate(15deg)
}

#entradadatos>p>button:hover {
    background-color: #348234
}

#entradadatos>p>button:disabled {
    background-color: #333;
    color: #555
}

#datos {
    font-size: 14px;
    position: fixed;
    top: 0;
    background-color: #fff
}

.caja,
.caja2,
.caja3,
.caja4 {
    position: absolute;
    text-align: center
}

#teclado button,
.botonenlace {
    float: left
}

.caja {
    color: #f33
}

.caja2 {
    color: #6f6
}

.caja3 {
    color: #66f
}

#display,
.caja4 {
    color: #ff6
}

.botonenlace {
    color: #eee;
    width: 40%;
    height: 40%;
    margin-top: 6.7%;
    margin-left: 6.7%;
    border-radius: 15%;
    cursor: pointer
}

#botexp,
#botnor,
#volver {
    position: absolute;
    bottom: -27%;
    box-sizing: border-box;
    border: none;
    color: rgba(255, 255, 255, .15);
    background-color: rgba(255, 255, 255, .01);
    cursor: pointer
}

a:first-child>.botonenlace {
    background-color: #f33
}

.botonenlace:hover {
    opacity: .7
}

#display {
    text-align: right;
    margin-bottom: 5%;
    width: 95%;
    padding-right: 2%;
    padding-top: 2%
}

#dondetodosucede {
    position: relative;
    background-color: #151
}

#teclado {
    top: 0;
    background-color: #000
}

#teclado button {
    height: 20%;
    padding: 2% 0 0;
    cursor: pointer;
    color: #000
}

#teclado button:disabled {
    background-color: #333
}

#tpan {
    background-color: #66f;
    border: 2px solid #000;
    font-size: .5em
}

#t0,
#tc,
#tcal,
#tdel,
#tdiv,
#tdive,
#tmas,
#tmen,
#tpor,
#tpri,
#trai {
    border: 2px solid #000;
    font-size: inherit
}

#tcal {
    width: 60%
}

#tc,
#tdel,
#tdiv,
#tdive,
#tmas,
#tmen,
#tpor {
    width: 20%;
    background-color: #66f
}

#tpri,
#trai {
    width: 20%
}

#t1,
#t2,
#t3,
#t4,
#t5,
#t6,
#t7,
#t8,
#t9,
#tcom {
    width: 20%;
    background-color: #ff6;
    border: 2px solid #000;
    font-size: inherit
}

#t0 {
    background-color: #ff6
}

#atwitter {
    position: relative;
    color: #ddd;
    cursor: pointer
}

#atwitter:hover {
    color: #ff5c33
}

#salida {
    top: -100%;
    box-sizing: initial;
    overflow: hidden
}

#divvolver {
    position: absolute;
    top: -100%;
    width: 100%;
    height: 79%;
    transition: top .5s;
    -webkit-transition: top .5s;
    cursor: pointer
}

#salida p,
#salida span {
    color: #ff6;
    font-size: 30px
}

#botexp,
#botnor {
    display: none;
    right: 0;
    width: 50%;
    height: 27%
}

.perror {
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%
}

@media only screen and (max-width: 768px) {

    #contenedor,
    #dondetodosucede {
        width: 100% !important
    }
}



/* Isolate calculator sizing from rest of page  */
.calculator-isolated {
    font-size: 16px !important;
    /* Base font size */
    position: relative !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* Override Kadence navigation specificity */
.wp-site-blocks .site .site-header .nav-menu-wrapper {
    font-size: inherit !important;
}

.site-header .header-navigation {
    font-size: initial !important;
}

/* Ensure calculator stays contained */
#contenedor * {
    font-size: inherit;
}