:root 
{
    /* COLOR SCHEME*/

    --dl-color-red: #cd2026;
    --dl-color-black-light: #323a45;
}

@font-face
{
  font-family: 'fancy';
  src: url(../font/Kreadon-B.otf);
  font-style: normal;
  font-weight: 100;
}

@font-face
{
  font-family: 'simple';
  src: url(/font/OpenSans-Regular.ttf);
  font-style: normal;
  font-weight: 100;
}

@keyframes fade-in{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

/* PRELOADER */

.loader{
  position: fixed;
  top: 0;
  left: 0;
  background: var(--dl-color-red);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 1;
}


.loader img{
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}

.disappear{
  animation: vanish 1s forwards;
}

@keyframes vanish {
  100%{
    opacity: 0;
    visibility: hidden;
  }
}

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