/*ANIMATIONS*/

/*-----------------------------------*/
/*ANIM _ TEXT FADE IN AND FLOAT DOWN */

.whiteDown {
  animation: downIGo 0.5s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes downIGo {
  0% {
    background-color: rgba(255,255,255,0.85);
    color: #404040;
  }
  100% {
    background-color: rgba(0,0,0,0.25);
    color:white;
  }
}

.whiteUp {
  animation: upIGo 0.5s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes upIGo {
  0% {
    background-color: rgba(0,0,0,0.25);
    color:white;
  }
  100% {
    background-color: rgba(255,255,255,0.85);
    color: #404040;
  }
}

.logoDown {
  animation: logoDownIGo 0.5s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes logoDownIGo {
  0% {
    opacity:1.0;
  }
  100% {
    opacity:0;
    }
}

.logoUp {
  animation: logoUpIGo 0.5s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes logoUpIGo {
  0% {
    opacity:0;
  }
  100% {
    opacity:1.0;
  }
}

/*---------------------*/
/*ANIM _ MENU FADES IN */

.menuOn {
  animation: fadeIn 0.5s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 0.95;
  }
}

/*---------------------*/
/*ANIM _ MENU FADES OUT */

.menuOff {
  animation: fadeOut 0.5s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeOut {
  0% {
    opacity: 0.95
  }
  100% {
    opacity: 0
  }
}

/*---------------------*/
/*ANIM _ PARTIAL PIC ENLARGE */

.picZoom {
  animation: picBig 15s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes picBig {
  0% {
    transform: scale(1.0)
  }
  100% {
    transform: scale(1.2)
  }
}

/*---------------------*/
/*ANIM _ MARGIN ANIMTION */

.marginAniU {
  animation: marGoU 1s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes marGoU {
  0% {
    padding:20px 0 0 0;
    opacity:0;
  }
  100% {
    padding:0 0 20px 0;
    opacity:1.0;
  }
}

.marginAniD {
  animation: marGoD 1s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes marGoD {
  0% {
    padding:0 0 20px 0;
    opacity:0;      
  }
  100% {
    padding:20px 0 0 0;
    opacity:1.0;
  }
}

/*---------------------*/
/*ANIM _ MARGIN ANIMTION */

.colUp {
  animation: cU 0.25s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes cU {
  0% {
    background-color:white;
    color:black;
    }
  100% {
    background-color:orangered;
    color:white;
  }
}

.colDown {
  animation: cD 0.25s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes cD {
  0% {
    background-color:orangered;
    color:white;
    }
  100% {
    background-color:white;
    color:black;
  }
}

/*---------------------*/

.socColUp {
  animation: sCU 0.25s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes sCU {
  100% {
    fill: black;
  }
}

.socColDown {
  animation: sCD 0.25s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
  animation-direction:reverse;
}
@keyframes sCD {
  100% {
    fill: black;
  }
}