.efteper {

    h1,
    h2,
    h3,
    h4,
    h5 {
        color: #333366 !important;
    }

    b {
        color: #6699CC !important;
    }

    .bg {
        background-color: #333366;
        color: white !important;
        padding: 20px;
        margin: 30px 0;
    }

    .borde {
        border-bottom: 2px solid #679CD1;
        padding-bottom: 30px;
        margin: 30px 0;
    }

    .bg-gris {
        background-color: #F2F2F2;
        padding: 20px;
        margin: 40px 0;
    }

    .bg-azul {
        background-color: #333366;
        color: white !important;
        padding: 20px;
        margin: 40px 0;

        h2,
        h3,
        h4,
        h5 {
            color: white !important;
            font-weight: 300 !important;
        }

        code {
            color: #CCCCCC !important;
        }
    }

    .bg-azulclaro {
        background-color: #679cd1;
        color: white !important;
        padding: 20px;
        margin: 40px 0;

        h2,
        h3,
        h4,
        h5 {
            color: white !important;
            font-weight: 300 !important;
        }

        code {
            color: #CCCCCC !important;
        }

        b {
            color: white !important;
        }
    }

    .bg-oscuro {
        background-color: #373A43;
        color: white !important;
        padding: 20px;
        margin: 40px 0;

        h2,
        h3,
        h4,
        h5 {
            color: white !important;
            font-weight: 300 !important;
        }

        code {
            color: #CCCCCC !important;
        }
    }

    .bg-imagen {
        color: white !important;

        .col {
            background-color: rgba(55, 58, 67, 0.8);
            padding: 20px;

            h2,
            h3,
            h4,
            h5 {
                color: white !important;
            }
        }

        code {
            color: #CCCCCC !important;
        }
    }

    .card {

        h2,
        h3,
        h4,
        h5,
        card-title {
            color: #6699CC !important;
        }

        .card-header {

            h2,
            h3,
            h4,
            h5,
            card-title {
                font-size: medium;
            }
        }
    }

    .accordion {
        .btn-link {
            color: #679cd1 !important;
        }

        .btn-link.btn-primary {
            color: #679cd1 !important;
        }
    }

    .importante {
        background: #333366 !important;
        color: white !important;
    }

    .highlight {
        color: #679cd1 !important;
    }

    .call2action {
        color: #333366 !important;
        font-style: italic;
    }

    .ejemplo,
    .tips {
        background-color: #679cd1 !important;
        color: white !important;
    }

    .tips::before {
        filter: invert(100%);
    }

    .banner {
        margin: 40px 0;
        background-position: center;
        background-size: cover;
        min-height: 200px;

        .content {
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white !important;
            padding: 20px;
            display: inline-block;
            max-width: 70%;

            h2,
            h3,
            h4,
            h5 {
                color: white !important;
                border-bottom: #6699CC 2px solid;
                padding-bottom: 10px;
            }
        }
    }

    .icono.fondo {
        background-color: #6699CC !important;
    }

    .icono.fondo::before {
        filter: invert(100%);
    }
}