@import url(style1.css);

body {
	font-family: 'Rubik', sans-serif;
	text-align: center;
	color: #149dcc;
	font-size: 1.6rem;
	padding-top: 38vh;
	overflow: hidden;
	overflow-x: hidden !important;
}
sup {
	font-size: 14px;
}
.div2 {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
}
.div1:first-of-type {
	animation: appear 7s infinite;
}
.div1:last-of-type {
	animation: reveal 7s infinite;
}
.div2:last-of-type span {
	font-size: 1.6rem;
	color: #149dcc;
	animation: slide 7s infinite;
}

@keyframes appear {
        0% {
            opacity: 0;
        }

        20% {
            opacity: 1;
        }

        80% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }

@keyframes slide {
        0% {
            margin-left: -800px;
        }

        20% {
            margin-left: -800px;
        }

        35% {
            margin-left: 0px;
        }

        100% {
            margin-left: 0px;
        }
}
	
	
.center {
	position: absolute;
	margin-top: 90px;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	align-items: center;
	justify-content: center;
	vertical-align: middle;	
}



.fadein {
   animation: fadeInAnimation ease 4s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   }

@keyframes fadeInAnimation
{
   0%
   { 
   opacity: 0;
   }

   100% 
   {
   opacity: 1;
   }
}


.meter {
	display: flex; 
    height: 21px;
    position: relative;
    background: #CCC;
    overflow: hidden;
	width: 100%;
	margin: auto;
}
.meter span {
    display: block;
    height: 100%;
	width: 100%;
}
.progress {
    background-color: #149dcc;
    animation: progressBar 4s ease-in-out;
    animation-fill-mode:both; 
}

@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}


*:focus {
    outline: 0 !important;
}


:focus {
    outline:none;
    border: 0;
}