/*//////////////////////////// TRANSICIONES ///////////////////////////////////*/


.cover {
  background: #000000;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 0;
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  overflow: hidden;
}

.cover.fadeSiteIn {
  animation: fadeSiteIn 800ms cubic-bezier(0.19, 1, 0.22, 1) forwards 3s; /* [1] */
  width: 100%;
}

.cover.fadeSiteOut {
  animation:  fadeSiteOut 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards ; /* [2] */
  width: 100%;
  left: -100%;
}
.cover.sectionIn {
  animation: sectionIn 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  width: 100%;
}




@keyframes fadeSiteOut { /* [2] */
  from   { left: -100%; }
  to     { left: 0; }
}
@keyframes fadeSiteIn { /* [2] */
  from   { left: 0%; }
  to     { left: 100%; }
}
@keyframes sectionIn { /* [2] */
  0%  { transform: translate3d(0, 100vh, 0); }
  40% { transform: translate3d(0, 0vh, 0); }
  60% { transform: translate3d(0, 0vh, 0); }
  100% { transform: translate3d(0, 100vh, 0); }
}
@keyframes fadeIn { /* [2] */
  from   { opacity: 0; }
  to     { opacity: 1; }
}
@keyframes fadeOut { /* [2] */
  from   { opacity: 1; }
  to     { opacity: 0; }
}
.loader{
    border: 5px solid;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-color: orange transparent transparent;
    animation: spin 0.5s ease infinite;
    position: relative;
  }

  
  @keyframes spin{
    100%{transform:rotate(360deg);filter:hue-rotate(360deg)}
  }

.spinner {
  width: 100px;
  height: 100px;
  background-color: transparent;

  margin: 100px auto;
  animation: fadeIn 1.2s ease forwards, fadeOut 1s ease forwards 2s;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
.cover.fadeSiteOut .spinner {
    display: none;
}