@charset "UTF-8";
/* CSS Document */

body{background-color:#eef3f6}

.speed-wrapper{
	max-width:1460px;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 14px;
}


.lum1, .lum2, .lum3, .lum4{width:25%;float:left}
.lum1 h3{display:inline-block;padding-left:18px}
.lum2 h3, .lum3 h3, .lum4 h3{padding-left:18px; display:inline-block; color:#00458D}
.lum2 p, .lum3 p, .lum4 p{padding-left:18px;     margin-top: 0px;}

i.fas {color:#00458D;
    font-size: 22px!important;
	display:inline-block;
	padding-left: 18px;
}

.lum1 i.fas {padding:0px;color:#000}


.speed-wrapper h3{font-family: 'Roboto Slab', serif;
font-size:24px;    margin-bottom: 6px;}



/*.speed-table .col1, .speed-table .col2, .speed-table .col3, .speed-table .col4{    
    padding: 1px 1px 0px 18px;
    height: 38px;
    margin-bottom: 17px;
}*/

.gradient1, .gradient2, .gradient3, .gradient4{background-color: white;
    width: 75%;
    float:left;margin-bottom:17px;height: 43px;}

.row1, .row2, .row3, .row4 {
    position: relative;
    float: left;
	width:100%;
	margin-bottom:17px;
}

.speed-table .row1 .col1, .speed-table .row2 .col1, .speed-table .row3 .col1, .speed-table .row4 .col1{    
	width:25%;
	height: 42px;
	float:left;
    background-color: transparent;
    margin-bottom: 17px;
border-bottom:1px solid black}

.speed-table .col2, 
.speed-table .col3, 
.speed-table .col4{    
	width:33.3%;
	height: 43px;
	float:left;
    margin-bottom: 17px;}

.col2 p, .col3 p, .col4 p{    
	padding-left:18px;    z-index: 999;
    position: absolute;
color: #c0c3c5;}

.row1 .col2 p, .row1 .col3 p, .row1 .col4 p{color:black}

.speed-table .row1, .speed-table .row2, .speed-table .row3, .speed-table .row4{
	height:38px
}


.speed-table .row1.col1, .speed-table .row1.col2, .speed-table .row1.col3, .speed-table .row1.col4{border-bottom:1px solid black;
}
.speed-table .col1 p{font-size:16px;font-weight:bold}




.progress1,.progress2,.progress3,.progress4 {
    width: 75%;
    float: left;
    position: absolute;
    margin-bottom: 17px;
    height: 43px;
    z-index: 0;
    left: 25%;
}

.progress1{
    background: #A3ADB7;
    animation: progressBar1 20s ease-in;
    animation-fill-mode: both;
	animation-iteration-count:infinite;
}
.progress2{
    background: rgb(201,53,121);
background: linear-gradient(90deg, rgba(201,53,121,1) 0%, rgba(0,69,141,1) 100%);
    animation: progressBar2 20s ease-in;
    animation-fill-mode: both;
	animation-iteration-count:infinite;
}
.progress3{
    background: rgb(201,53,121);
background: linear-gradient(90deg, rgba(201,53,121,1) 0%, rgba(0,69,141,1) 100%);
    animation: progressBar3 20s ease-in;
    animation-fill-mode: both;
	animation-iteration-count:infinite;
}
.progress4{
    background: rgb(201,53,121);
background: linear-gradient(90deg, rgba(201,53,121,1) 0%, rgba(0,69,141,1) 100%);
    animation: progressBar4 20s ease-in;
    animation-fill-mode: both;
	animation-iteration-count:infinite;

}

.mobileon{display:none}
.mobileoff{display:block}


@keyframes progressBar1 {
  0% { width: 0; }
	100% { width: 75%;} 
}

@keyframes progressBar2 {
  0% { width: 0; }
	50% { width: 75%;} 
}

@keyframes progressBar3 {
  0% { width: 0; }
	30% { width: 75%;} 
}

@keyframes progressBar4 {
  0% { width: 0; }
	18% { width: 75%;} 
}




@media only screen and (max-width: 970px){
	
	.speed-wrapper h3{display:none}
	
	
	i.fas{
		font-size: 30px!important;margin-bottom:20px}
	
	.mobileon{display:block}
	.mobileoff{display:none}
	
	
}

@media only screen and (max-width: 550px){
	
	.speed-wrapper {font-size:12px!important;}
	
	.speed-table .col1 p {
    font-size: 14px;
    font-weight: bold;
}
	
	
}