@import url('https://fonts.googleapis.com/css?family=Roboto:300');

#loader {
  text-align:center;
  color:#555;
  font-family:'Roboto';
  font-weight:230;
  font-size:22px;
  padding-top:20vh;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
  width: 100%;
  height: 100vh;
  top: 0;
  background-color: white;
  z-index: 999;
}
#loader div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

#loader div:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 4s infinite;
}

#loader div:last-of-type {
  width:0px;
  animation: reveal 4s infinite;
}

#loader div:last-of-type span {
  margin-left:-355px;
  animation: slidein 5s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    10% { margin-left:-800px; }
    65% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
	55% {opacity:1;width:355px;}
    60% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


#loader p {
  font-size:12px;
  color:#999;
  margin-top:200px;
}

.nav-link{
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: bold;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: .75rem;
  padding-left: .5rem;
}

@media (min-width: 1200px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1300px;
}}


.navbar{
  padding-top: 0;
  padding-bottom: 0;
}
a{
  text-decoration: none;
}

#currentDate{
  margin-bottom: 0;text-align: center;background-color:#f6f6f6
}