html {
    background-color: #ECF0F1 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
}

.sec-portada {
    background-color: #297fb924 !important;
    border:1px solid black;
}

.sec-portada img {
    border:1px solid black;
}

.sec-sinopsis {
    background-color: #fbcc125e !important;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
    font-weight: 770 !important;
    border: 1px solid black !important;
}

.sec-tags {
    background-color: #2C3E50 !important;
    border: 1px solid white !important;
}

.sec-tags span {
    background-color: #88c9d4 !important;
    font-weight: 617;
    color: #34495E !important;
    border: 2px solid whitesmoke;
}

.sec-portada, .sec-tags, .sec-buttons, .sec-sinopsis, .sec-preguntas {
    box-shadow: 7px 7px 3px #aaaaaa;
    font-family: 'Roboto Condensed', sans-serif !important;
}

.sec-buttons {
    background-color: #ffffff97 !important;
    border: 1px solid #aaaaaa;
    text-align: center;
}

.sec-buttons a {
    text-decoration: none !important;
}

.sec-buttons button{
    margin: 2.7px;
    background-color: black !important;
    color: white;
    font-variant: all-petite-caps;
    font-weight: 700;
    text-decoration: none;
}
.sec-buttons button:hover{
    margin: 2.7px;
    background-color: rgba(2, 57, 120, 0.968) !important;
    color: black;
    font-variant: all-petite-caps;
    font-weight: 700;
    text-decoration: none;
}

.sec-preguntas{
    background-color: #e67d222e !important;
    border: 1px solid black !important;
    font-size: 17px;
    font-weight: 770 !important;
    margin-bottom: 10px;
}

.sec-preguntas .content {
    font-size: 18px !important;
    font-weight: 500 !important;
    width: 97%;
    text-align: center;
}

.text {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
}

.boton-comprar-amazon{
    background-color: #ff9900;
    border: 1px solid black;
    color: #000000;
    border-radius: 25px;
}

.boton-comprar-google{
    background-color: #4285F4;
    border: 1px solid black;
    color: #000000;
    border-radius: 25px;
}

.block-boton-comprar {
    height: 50px;
    width: 333px;
    text-align: center;
    padding-top: 7px;

    margin-top: 7.71px;
    font-size: 17.81px !important;
    font-size: 17px !important;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
}

.block-boton-comprar em{
    position: relative;
    top: -6.71px;
}

.block-buy{
    position: fixed;
    bottom: 1%;
    left: 17.81px;
    z-index: 10;
    width: 500px;
    opacity: 0.91;
}

.block-buy-old{
    position: relative;
    top: 71px;
    left: 17.81px;
}


.sec-indice  .message-header, .sec-recursos .message-header, .sec-repositorios  .message-header, .sec-bibliografia  .message-header{
    background-color: black !important;
    font-variant: all-petite-caps;
    font-weight: 700;
}

.sec-indice  .message-body, .sec-recursos .message-body, .sec-repositorios .message-body, .sec-bibliografia .message-body {
    border-left: 4.25px solid black !important;
    border-bottom: 2.75px solid black !important;
    border-right: 1.8px solid black !important;
    color: black !important;
}

.sec-indice {
    color: black !important;
    font-family: 'Roboto Condensed', sans-serif !important;
}

.li-chapter-div {
    font-weight: 600 !important;
    color: black !important;
}

.li-chapter div, .li-section div{
    font-weight: 600 !important;
    display: contents;
}

.li-chapter li  {
    margin-left: 17px;
}
.li-chapter::before{
    font-weight: 600 !important;
    color: black !important;
}

ol {
    counter-reset: item;
    color: black !important;
  }
  li {
    display: block
  }
  li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
  }


.button-muestra em {
    border: 2px solid black !important;
    font-weight: 700 !important;
    background-color: #ff000085;
    padding: 2px;
}

.button-muestra ion-icon {
    border-left: 2px solid black !important;
}

.button-muestra-link {
    text-decoration: none;
}

.button-muestra-link:hover{
    background-color: yellow;
}

#footer {
    background-color: #fbffd2;
    padding: 3rem 1.5rem 6rem;
    border-top: 1px solid gray;
    font-size: smaller;
    font-style: oblique;
    font-weight: 500 !important;
}

.refbook {
    padding: 2px;
    font-weight: 600 !important;
    display: block;
    color:black;
    letter-spacing: 0.07em;
    font-family: 'Roboto Condensed';
    text-decoration: none !important;
}

.refrepo {
    padding: 2px;
    font-weight: 600 !important;
    display: block;
    color:black;
    letter-spacing: 0.07em;
    font-family: 'Roboto Condensed';
    text-decoration: none !important;
    padding: 5px;
}

.refrepo a {
    font-size: 17px !important;
}

.about-me {
    margin-bottom: 157px;
}

.about-me img {
    float: right;
    top: 10px;
}

.about-me-image-column {
    padding-left: 67px !important;
    margin-bottom: 17px;
}

.discound-buy {
    background: #f7f1e4;
    border: 7px dashed red;
    height: 130px;
    text-align: center;
    vertical-align: top;
    font-size: 27px;
    margin: 22px;
    font-family: Courier New;
    font-variant: all-petite-caps;
    font-weight: 700;
}


@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px) rotateZ(-3deg);
        transform: translateX(5px) rotateZ(-3deg);
        -ms-transform: translateX(5px) rotateZ(-3deg);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.discound-buy:hover {
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}


.discound-buy .promotion {
    background: #ba4d4c;
    color: white;
    letter-spacing: 5px;
    font-style: italic;
    position: relative;
    top: -27px;
    width: 177px;
    left: 37px;
    border: 1px solid;
    font-size: 27px;
    padding: 0px;
    margin: 0px;
}

@media only screen and (min-width: 220px) and (max-width: 576px) {
    .discound-buy .promotion {
        font-size: 21px !important;
        top: -21px !important;
    }
    .discound-buy {
        font-size: 21px !important;
        height: 237px !important;
    }
  }


  @media only screen and (min-width: 577px) and (max-width: 699px) {
    .discound-buy .promotion {
        font-size: 22px !important;
        top: -21px !important;
    }
    .discound-buy {
        font-size: 24px !important;
        height: 177px !important;
    }
  }


  @media only screen and (min-width: 700px) and (max-width: 971px) {
    .discound-buy .promotion {
        font-size: 22px !important;
        top: -21px !important;
    }
    .discound-buy {
        font-size: 24px !important;
        height: 147px !important;
    }
  }



  .nav-style {
    color: white;
    background-color: #2c2c54 !important;
    font-family: 'Roboto Condensed';
    font-variant: all-small-caps;
    font-weight: bold;
    font-size: 20px;
    height: 61.7px;
  }

  .nav-item-style {
    color: white !important;
    background-color: black !important;
    font-family: 'Roboto Condensed';
    font-variant: all-small-caps;
    font-weight: bold;
    font-size: 20px;
    border-right: 2px solid #ffffffa8;
  }

  .nav-item-style:hover {
    color: white !important;
    background-color: #2c2c54 !important;

  }


.sec-cap {
    background: #ffffff82;
    border: 1px solid;
    color: #00000030;
    margin-bottom: 10px;
    padding: 7px;
}

.titulo-sec-cap {
    background-color: #5d90cfba;
    padding: 13px;
    border: 1px solid black;
}

.titulo-sec-cap-num {
    border: 1px solid black;
    background: black;
    font-size: 44px;
    /* margin: 13px; */
    padding: 10px;
    color: white;
    font-style: normal;
    font-family: monospace;
}