/*Elementos generales de la página*/
html{
    font-family: 'Roboto', sans-serif;
    background-color: rgb(221, 221, 221);
    
}

footer{
    background-color: rgb(221, 221, 221);
}

p{
    font-family: 'Roboto', sans-serif;
}

ul{
    list-style-image: url("../img/icono.png");
}

.sub-text {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

.sub-text:hover, .sub-text:focus {
    background-size: 100% 2px;
}

/*Elementos seleccionados por clase*/
.banner{
    color: #007ec7;
    background-color: #add8ff;
    text-align: center;
    font-size: auto;
    font-style: italic;
}

.navibar{
    font-size: 5vh;
}

.header{
    background-color: #e8eefa;
}

.contenedor{
    display: flex;
    justify-content: last baseline;
    flex-wrap: wrap;
}

.sombra{
    font-size: 25px;
}

.cont-acordeon{
    margin: auto;
}

.fadeTop {
    opacity: 0; 
    transform: translate(0, 10vh);
    transition: all 1s;
  }

  .visible {
    opacity: 1;
    transform: translate(0, 0);
  }

  .azul{
      background-color: #add8ff;
  }

  .center{
      text-align: center;
  }

  /*Pantalla de movil*/
@media screen and (max-width: 700px){
    .sombra{
        font-size:15px;
        width: 85%;
        margin: auto;
    }
    
    .no-fade{
        opacity: 1; 
        transform: translate(0, 0vh);
        transition: all 1s;
    }

    footer{
        font-size: 10px;
    }

    .img-cliente{
        width: 70px;
    }

    #multiCollapseExample1, #multiCollapseExample2, #multiCollapseExample3{
        width: 100%;
    }
}


/*Elementos seleccionados por id*/
#gon-mail{
    color: black;
    font-size: 0.7em;
    font-size-adjust: 0.58;
    text-align: center;
    text-decoration: none;
}

#ft-creador{
    color: black;
    font-size-adjust: 0.58;
    text-align: center;
    text-decoration: none;
}


/*Efectos*/
#gon-mail:hover{
    animation: rainbow 0.5s infinite;
    text-decoration: none;
}



/*Keyframes*/
@keyframes rainbow{
    0%{color:black;}
    19%{color:red;}
    25%{color:brown;}
    40%{color:blue;}
    55%{color:green;}
    70%{color:orange;}
    85%{color:magenta;}
    100%{color:black;}
}

@keyframes mostrarArriba{
    0%{
        transform: translateY(60px);
    }
    100%{
        transform: translateY(0);
    }
}