body{
margin:0;
background:#0B0F14;
font-family:Arial;
color:#fff;
}

/* TOP BAR */
.topbar{
height:50px;
background:#12181F;
border-bottom:1px solid #1C232B;
position:relative;
}

.time{
position:absolute;
left:10px;
top:15px;
font-size:14px;
opacity:0.8;
}

.brand{
text-align:center;
padding-top:8px;
}

.brand img{
height:30px;
}

.status{
position:absolute;
right:10px;
top:15px;
font-size:12px;
opacity:0.7;
}

/* CONTAINER */
.container{
padding:20px;
text-align:center;
}

/* CARD BASE */
.card{
border-radius:18px;
color:#fff;
margin:10px auto;
position:relative;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
border:1px solid rgba(255,255,255,0.05);
}

/* ICON */
.icon{
font-size:40px;
margin-top:20px;
}

/* TEXT */
.title{
font-size:16px;
font-weight:bold;
margin-top:10px;
}

.sub{
font-size:12px;
opacity:0.7;
margin-top:5px;
}

/* BIG CARD (NAVEGACIÓN) */
.big{
height:220px;
width:95%;
background:#1A73E8;
}

/* ROW */
.row{
width:95%;
margin:0 auto;
}

/* SMALL CARDS */
.small{
width:48%;
height:150px;
display:inline-block;
}

/* COLORS */
.nav{ background:#1A73E8; }
.music{ background:#00C2A8; }
.internet{ background:#FB8C00; }

/* BOTTOM BAR */
.bottombar{
position:fixed;
bottom:0;
width:100%;
height:45px;
line-height:45px;
background:#12181F;
border-top:1px solid #1C232B;
text-align:center;
font-size:13px;
}

.bottombar span{
margin:0 15px;
opacity:0.8;
}

/* TOUCH EFFECT */
.card:active{
opacity:0.7;
}