/*ANIMATIONS*/

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

.floatDown {
  animation: downIGo 2s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes downIGo {
  0% {
    padding-bottom: 30px;
    opacity: 0
  }
  50% {
    opacity: 1.0;
  }
  100% {
    padding-bottom: 0px;
    opacity: 1.0
  }
}

/*  animation: upIGo 2s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
  -webkit-animation: upIGo 2s;
  -webkit-animation-play-state: running;
  -webkit-animation-delay: 0;
  -webkit-animation-timing-function: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: upIGo 2s;
  -moz-animation-play-state: running;
  -moz-animation-delay: 0;
  -moz-animation-timing-function: 1;
  -moz-animation-fill-mode: forwards;
  -o-animation: upIGo 2s;
  -o-animation-play-state: running;
  -o-animation-delay: 0;
  -o-animation-timing-function: 1;
  -o-animation-fill-mode: forwards;*/


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

.floatUp {
  animation: upIGo 2s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes upIGo {
  0% {
    padding-top: 30px;
    opacity: 0
  }
  50% {
    opacity: 1.0;
  }
  100% {
    padding-top: 0px;
    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.85
  }
}

/*---------------------*/
/*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.85
  }
  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:rgba(0,0,0,0.65);
    color:white;
    }
  100% {
    background-color:#0000af;
    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:#0000af;
    color:white;
    }
  100% {
    background-color:rgba(0,0,0,0.65);
    color:white;
  }
}

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

.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;
  }
}