
/* Absolute Center*/
.loading {
  position: fixed;
  z-index: 999;
  max-width: 800px;
  height: 58px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display:none;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
}


.loading .rs-1-logo { 
	position: absolute; 
	display: block;  
	top: 0; 
	object-fit: none; 
	height: 100%; 
	transform-origin:center left; 
}


/* loading */
@media all and (max-width: 850px) {	.loading .rs-1-logo{transform:scale(calc(800/800));} }
@media all and (max-width: 750px) {	.loading .rs-1-logo{transform:scale(calc(700/800));} }
@media all and (max-width: 650px) {	.loading .rs-1-logo{transform:scale(calc(600/800));} }
@media all and (max-width: 550px) {	.loading .rs-1-logo{transform:scale(calc(500/800));} }
@media all and (max-width: 450px) {	.loading .rs-1-logo{transform:scale(calc(400/800));} }
@media all and (max-width: 350px) { .loading .rs-1-logo{transform:scale(calc(300/800));} }
.loading .rs-1-logo {animation:rs-1-logo-an 1s ease 0s infinite;}
.loading .rs-1-logo:nth-child(1) {   left: calc(100% *   0 / 800);   object-position:    0px 0px;    width:  80px;  }
.loading .rs-1-logo:nth-child(2) {   left: calc(100% *  80 / 800);   object-position:  -80px 0px;    width:  80px;  animation-delay:0.1s;}
.loading .rs-1-logo:nth-child(3) {   left: calc(100% * 160 / 800);   object-position: -160px 0px;    width: 120px;  animation-delay:0.2s;}
.loading .rs-1-logo:nth-child(4) {   left: calc(100% * 280 / 800);   object-position: -280px 0px;    width: 120px;  animation-delay:0.3s;}
.loading .rs-1-logo:nth-child(5) {   left: calc(100% * 410 / 800);   object-position: -410px 0px;    width: 130px;  animation-delay:0.4s;}
.loading .rs-1-logo:nth-child(6) {   left: calc(100% * 540 / 800);   object-position: -540px 0px;    width: 110px;  animation-delay:0.5s;}
.loading .rs-1-logo:nth-child(7) {   left: calc(100% * 650 / 800);   object-position: -650px 0px;    width: 150px;  animation-delay:0.6s;}
@keyframes rs-1-logo-an { 0%{top:0px;} 20%{top:-20px;} 40%{top:0px;} 100%{top:0px;}  }


@media all and (max-width: 850px) {
	.rs-7-logos .rs-1-logo:not(:first-child) {display:none;}
}


@media all and (min-width: 850px) {
	
	.rs-7-logos>div { height:58px; }

	.rs-7-logos .rs-1-logo { 
		position: absolute; 
		display: block;  
		top: 0; 
		object-fit: none; 
		height: 100%; 
		transform-origin:center left; 
	}

	.rs-7-logos .rs-1-logo  {animation:rs-1-logo-am 4s ease 0s 1 normal forwards; transform:translate(100vw);}
	.rs-7-logos .rs-1-logo:nth-child(1) {   left: calc(100% *   0 / 800);   object-position:    0px 0px;    width:  80px;  }
	.rs-7-logos .rs-1-logo:nth-child(2) {   left: calc(100% *  80 / 800);   object-position:  -80px 0px;    width:  80px;  animation-delay:0.2s;}
	.rs-7-logos .rs-1-logo:nth-child(3) {   left: calc(100% * 160 / 800);   object-position: -160px 0px;    width: 120px;  animation-delay:0.4s;}
	.rs-7-logos .rs-1-logo:nth-child(4) {   left: calc(100% * 280 / 800);   object-position: -280px 0px;    width: 120px;  animation-delay:0.6s;}
	.rs-7-logos .rs-1-logo:nth-child(5) {   left: calc(100% * 410 / 800);   object-position: -410px 0px;    width: 130px;  animation-delay:0.8s;}
	.rs-7-logos .rs-1-logo:nth-child(6) {   left: calc(100% * 540 / 800);   object-position: -540px 0px;    width: 110px;  animation-delay:1.0s;}
	.rs-7-logos .rs-1-logo:nth-child(7) {   left: calc(100% * 650 / 800);   object-position: -650px 0px;    width: 150px;  animation-delay:1.2s;}
	@keyframes rs-1-logo-am { 
		 0%{transform:translate(100vw);} 
		40%{transform:translate(    0);} 
	   100%{transform:translate(    0);} 
	}

}

