*{ text-align: center; font-family: 'Open Sans'; align-content: center;}





.menu 
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: stretch;
    align-content: stretch;
    background-color: #0e0e0e; 
    width: 100%;
    height: 45px;
}

.menu ul {margin right: 3rem}
.menu a {
    text-decoration: none;
    padding: 0rem 1.5rem 0rem 1.5rem;
    color: white;
}

.logo {margin-left: 1rem; height:1.5rem; width:auto; margin-top:0.6rem;}



.menu a:hover {
    border-bottom: 3px solid white;
    width: 100%}



/*cabecera*/
.cabecera {background: url(../img/cabecera.jpg) center top no-repeat;
    background-size: cover;  
    padding-top: 35px;
    padding-bottom: 30px;}

.celularytexto {    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch}

.celular {margin-left: 30%;
        padding-right: 15px;}

.titulo {margin-right: 30%; 
        color: white;
        font-size: 2rem;
        text-align: left;}







/*titulo*/
h2{ width: 100%;
    background: #00BDA2;
    padding-top: 50px;
    padding-bottom: 50px;
color: white; 
text-align: center;
font-size: 3rem;
margin-top: auto;
}

h3 {color: #00BDA2;
    text-align: center;
    font-size: 2rem;
padding-bottom: 0px}



/*pasos*/
.pasos {display: flex; justify-content:center;}

.paso {padding: 2rem}
.numeroPaso {
    font-size: 3rem;
    text-align: center;
    color: #00BDA2;
line-height: 0px;
font-weight: 900;}

.nombrePaso {
font-size: 1.5rem;
    text-align: center;
    color: #00BDA2;
line-height: 0px;
font-weight: 700}

.descPaso {
font-size: 0.8rem;
font-family: arial;
    text-align: center;
    color: #b7b7b7;line-height: 1rem;}



.comentariodai {display: flex; justify-content:center; margin-left: 20%; margin-right: 20%; margin-top: 5rem}

.nombremargarita {font-size: 0.7rem;
font-family: arial;
    text-align: center;
    color: #b7b7b7;line-height: 1rem;}

.comentario {color:#113ea0;
    font-size: 1.5rem;
    padding-left: 2rem}

.comillas 
{ font-size: 2rem}

.negritabye
{font-weight: bolder;
font-size: 1.8rem}

.contactos {display: flex; 
    text-decoration: none;
    justify-content:center;
    font-size: 0.7rem;
    color: #b7b7b7;
    text-align: center;
    margin-right: 10%;
    margin-left: 10%}

.contactos a {text-decoration: none; 
    color: #b7b7b7;
font-weight: bold;
padding-left: 1rem;
padding-right: 1rem;}

.redessociales i {padding-left: 1rem;
padding-right: 1rem;}

footer {font-size: 0.5rem;
    font-family: arial;
    text-align: center;
    color: black}


/* MOBILE */
@media (max-width: 700px){
    .pasos {flex-direction: column; transition: 1s all}

    .comentariodai {flex-direction: column;}

    .celularytexto {flex-direction: column;transition: 1s all;}

    .titulo {text-align: center; align-content: center; margin-right: 3%;margin-left: 3%;}
    
    .celular {margin-left: 3%; margin-right: 3%}

    h2 {font-size: 2rem;
        padding-top: 20px;
        padding-bottom: 20px}