.todo {
    max-width: 100%;
    margin: 0 auto;
}

.tapa{
    background-color: #142440;
    color: white;
    padding:10px;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    height: 40px;
    margin-right: 10px;
}

.logo h4{
    font: 600 18px 'Lato';
    text-transform: uppercase;
    margin: auto 0px;
    text-align: center;
}

.cuerp{
    clear:both;
    display:block;
    width:100%;
    height: 70vh;
    background: linear-gradient(180deg,rgba(242, 242, 242, 1) 0%,rgba(242, 242, 242, 1) 57%, rgba(255, 255, 255, 1) 100%);
}

#ast{ 
    clear: both;
    width: 50%;
    height: 50px;
    padding: 7px;
    text-align: center;
    font: 900 50px 'Lato';
    color: #142440a8;
    margin: 0 auto -2px auto;
    transition: .7s;
}

.numbers {
    display: flex;
    font-family: 'Lato';
    flex-wrap: wrap;
    justify-content: center;
}

.number {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 2px 1px 5px 1px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    color: #2b3d5a;
    font-size: 25px;
    font-weight: bold;
    height: 45px;
    margin: 3px;
    width: 45px;
    transition: .6s;
    cursor: pointer;
}

.number:hover {
    background-color: #2b3d5a;
    color:white;
}

.aparte{
    clear: both;
    width: 100%;
}

@media only screen and (max-width:660px) {/* MidConvert AppearMENU*/
    .logo{
        padding: 8px;
    }
    .number {
    	height: 70px;
        margin: 4px;
        width: 70px;
        font-size: 35px;
    }
	#ast{
	    margin-top: -5px;
        height: 51px;
        padding: 0px;
        font-size: 65px;
	}
    .tapa {
        padding: 3px;
    }
}