.enlarge,
.reduce,
.color-text-1 {
    -webkit-transition: 1.2s cubic-bezier(.17, .85, .438, .99);
    -o-transition: 1.2s cubic-bezier(.17, .85, .438, .99);
    transition: 1.2s cubic-bezier(.17, .85, .438, .99);
}

.enlarge,
.reduce,
.color-text-1  {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.enlarge:hover {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

.reduce:hover {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
}

.color-text-1:hover {
    color: #FCB311 !important;
}

/*  Las siguientes clases se utlizan para el observer-viewport 
    En los dispositivos mobile la pseudoclase :hover no funciona 
    En este apartado vamos a simular el efecto hover cuando un elemento
    ingresa al viewport o pantalla del mobile, y lograr que los efectos o 
    las animaciones se aciven.
 */

 .enlarge.viewport {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

.reduce.viewport {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
}

.color-text-1.viewport {
    color: #FCB311 !important;
}