footer {
    display: none;
}
.encabezado {
    background-color: #9f1d5b;
}

.encabezado .icon-bell{
    font-size: 2.5rem;
}

.cuerpo {
    background: #cbcbcb;
}

.notificaciones{
    width: 90%;
    
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: space-around;    
    padding-bottom: 8rem;
}

.notificaciones ul {
    width: 100%;
    list-style-type: none;
    padding: 0;
}

.notificaciones ul li {
    margin-bottom: 1rem;
    width: 100%;
    background-color: #fff;
    padding: 0rem;
    height: 6rem;
    overflow: hidden;
    
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.sinleer {
    border-left: 1rem solid #f53c7d;
}
.notificaciones ul .leida {
    border-left: 1rem solid #bbb;
    background-color: #DDD;
    color: #bbb;    
}

.fecha{
    color: #fff;
    flex: 1;
    
    height: 100%;
        
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

.sinleer .fecha {background: #f63c7e;}

.leida .link {
    background-color: #DDD;
}

.txtnotif {
    flex:2;
    padding: 1rem;
}

.link{
    flex: 1;
    align-self: stretch;
    color: #fff;
    background: #9f9f9f;
    
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
    
}
.fecha, .link{
    font-size: 200%;
}
.link a, .link a:hover, .link a:visited {
    color: #fff;
}

.pie {    
    background-color: #9f1d5b;
}

.pie-circulo {
    background-color: #f63c7e;
}

@media all and (orientation: landscape) {
    .cuerpo {
        width: 40%;
    }
    
    footer {
    display: flex;
    }

    .notificaciones{
        width: 80%;
        padding-bottom: 2rem;
    }

    .fecha, .link{
        font-size: 2.5rem;
    }
}