body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, sans-serif;
}
    
#parentView {
    background-image: linear-gradient(125deg, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
    width: 100%;
    height: 100%;
}

.navHeader {
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.navHeader_ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 80%;
    height: 60px;
    float: right;
}

.navHeader_li {
    cursor: pointer;
    width: 25%;
    height: 60px;
    float: left;
}

.aHeader {
    padding-top: 18px;
    padding-bottom: 18px;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    color: #000000;
    display: block;
}

.aHeader:hover {
    background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
    border-bottom: 2px black solid;
}

.aHeader:hover .imgNavHeader { animation: rotation 1s infinite linear; }

.imgNavHeader {
    margin-top: -5px;
    margin-left: 5px;
    float: left;
    width: 30px;
    height: 30px;
}

.titulo {
    text-align: center;
    background: linear-gradient(to right, #656565 0%, #434343 50%, black 100%);
    -webkit-background-clip: text;
    background-blend-mode: multiply,multiply;
    -webkit-text-fill-color: transparent;
}

.navBody {
    width: 100%;
    height: 65%;
    overflow: scroll;
}

.navBody_ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 150px;
    float: right;
}

.navBody_li {
    width: 25%;
    height: 150px;
    display: inline-block;
    margin-bottom: 25px;
    margin-left: 30px;
    margin-right: 30px;
}

.navBody_span {
    text-align: center;
    width: 100%;
    height: 150px;
    font-size: 20px;
    cursor: pointer;
    display: block;
    border: 2px solid;
    background-image: linear-gradient(45deg, #f2f4f8 0%, #fafcff 52%, #f2f4f8 100%);
    border-image-source: linear-gradient(45deg, white 0%, black 50%, white 100%);
    border-image-slice: 1;
    margin-bottom: 5px;
}

.navBody_span:hover {
    background-image: linear-gradient(45deg, #fafcff 0%, #f2f4f8 52%, #fafcff 100%);
    border: 3px solid;
    border-image-source: linear-gradient(125deg, white 0%, black 50%, white 100%);
    border-image-slice: 1;
}
    
.imgNavBody {
    margin-top:15px;
    margin-bottom:-15px;
    width:50px;
    height:50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.navBody_span:hover .imgNavBody {
    animation: bounce 1s infinite alternate;
    animation-name: bounce;
}

/*INICIO DE HACER INVISIBLE LA BARRA DE MOVIMIENTO EN CUALQUIER PAGINA WEB*/
::-webkit-scrollbar {
    width: 0;
    background: transparent; /* make scrollbar transparent */
}
/*FIN DE HACER INVISIBLE LA BARRA DE MOVIMIENTO EN CUALQUIER PAGINA WEB*/

@keyframes rotation { 100%{ transform: rotatey(360deg) scale(2); } }

@keyframes bounce {
    from { transform: translateY(0px); }
    to { transform: translateY(-15px) rotatey(360deg); }
}