* {
    margin: 0;
    padding: 0;
}

body {
    /*background: #E9ECF4;*/
    color: #000;
    font-family: 'Poppins', sans-serif !important;
}

.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: 20px auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-template-areas: "header header header"
        "contenido contenido sidebar"
        "widget-1 widget-2 sidebar"
        "footer footer footer";
}
    .contenedor h1 {
        font-weight:bold;
    }
    .contenedor h2 {
        font-weight: bold;
    }
    .contenedor h3 {
        font-weight: bold;
    }

    .contenedor > div,
    .contenedor .header,
    .contenedor .contenido,
    .contenedor .sidebar,
    .contenedor .footer {
        background-color: whitesmoke;
        padding: 20px;
        border-radius: 4px;
        transition-duration: 0.5s;
    }

    .contenedor .header {
        background: rgb(0, 204, 204);
        color: #fff;
        grid-area: header;
        transition-duration: 0.5s;
    }

    .contenedor .contenido {
        grid-area: contenido;
        transition-duration: 0.5s;
    }

    .contenedor .sidebar {
        grid-column: 3 / 4;
        background: #fAA43D;
        text-align: center;
        display: grid;
        /*align-items: center;*/
        justify-content: center;
        min-height: 100px;
        grid-area: sidebar;
        transition-duration: 0.5s;
        color: whitesmoke;
    }
    .contenedor .sidebar h1{
        font-size:40px;
    }
        .contenedor .sidebar p {
            margin-top:0px;
        }

.sidebar {
    background-color: rgb(204, 0, 153) !important;
}  

    .contenedor .widget-1,
    .contenedor .widget-2 {
        background: #55a8fd;
        color: #fff;
        height: 100px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition-duration: 0.5s;
    }

    .contenedor .widget-1 {
        grid-area: widget-1;
        /*background-color: lightseagreen;*/
        background-color: green;
    }
    .contenedor .widget-1 h1 {
        font-size: 20px;
        position:relative;
        
    }

    .contenedor .widget-2 {
        grid-area: widget-2;
        /*background-color:mediumturquoise;*/
    }
        .contenedor .widget-2 h1 {
            font-size:20px;
        }

    .contenedor .footer {
        background: #12203E;
        color: #fff;
        grid-area: footer;
    }

@media screen and (max-width: 768px) {
    .contenedor {
        grid-template-areas: "header header header"
            "contenido contenido contenido"
            "sidebar sidebar sidebar"
            "widget-1 widget-1 widget-2"
            "footer footer footer";
    }
}

.contenido:hover {
    -ms-transform: scale(1.02); /* IE 9 */
    -webkit-transform: scale(1.02); /* Safari 3-8 */
    transform: scale(1.02);
    background-color:whitesmoke;
}

.contenedor .widget-1:hover,
.contenedor .widget-2:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05);
}

.contenedor .sidebar:hover {
    -ms-transform: scale(1.03); /* IE 9 */
    -webkit-transform: scale(1.03); /* Safari 3-8 */
    transform: scale(1.03);
}

.contenedor header:hover {
    -ms-transform: scale(1.03); /* IE 9 */
    -webkit-transform: scale(1.03); /* Safari 3-8 */
    transform: scale(1.03);
}

.sidebar__Sub1, .sidebar__Sub2, .sidebar__Sub3 {
    width: 100%;
    height: 60%;
    border-radius: 5px;
    text-align: center;
    justify-content: center;
    padding-top: 10px;
    display: grid;
    transition-duration: 0.5s;
    background-color: white;
    color: black;
    margin:5px;
    margin-bottom:10px;
}
#DivImpoSinSufijos:hover {
    cursor:pointer;
}