/* THE FADE IN ANIMATIONS */
.faded-words{
	position:relative;
	top: -90px;
	opacity: 0;
	
}

.faded-words.drop{
	animation: fadeDrop 1.5s forwards ease-in;
}

@keyframes fadeDrop{
	from{
		top: -90px;
		opacity: 0;
	}
	to{
		top: 0px;
		opacity: 1;
	}
}

.section2-words{
	position:relative;
	top: 50px;
	opacity: 0;
}

.drop .section2-words{
	animation: fadeRise 1.5s forwards ease-in;
}

@keyframes fadeRise{
	from{
		top: 50px;
		opacity: 0;
	}
	to{
		top: 0px;
		opacity: 1;
	}
}

.logo-div,
.logo-div2{
	overflow:hidden;
	height:80px;
	position:relative;
}

.logo-div2{
	margin-top:20px;
	height:90px;
}

.logo-case,
.logo-case2{
	position:absolute;
	height: 300%;
	top:0;
	/* animation: shuffleLogo 10s ease-in infinite; */
}

.logo-case2{
	/* animation: shuffleLogo2 15s ease-in infinite; */
}

.logo-case2{
	height: 400%;
}

@keyframes shuffleLogo{
	0%{
		top:0;
	}
	30%{
		top:0;
	}
	35%{
		top:-100%;
	}
	75%{
		top:-100%;
	}
	80%{
		top:-200%;
	}
	100%{
		top:-200%;
	}
}

@keyframes shuffleLogo2{
	0%{
		top:0;
	}
	25%{
		top:0;
	}
	30%{
		top:-100%;
	}
	55%{
		top:-100%;
	}
	60%{
		top:-200%;
	}
	85%{
		top:-200%;
	}
	90%{
		top:-300%;
	}
	100%{
		top:-300%;
	}
	
	
	
}

.logo-case>img{
	height: 33.4%;
}

.logo-case2>img{
	height: calc(100% /4);
	/* margin-bottom:18px; */
}

.brands-box{
	display:flex;
	flex-wrap:wrap;
}

@media (max-width: 500px){
	.section2-words{
	opacity: 1;
	}
}

@media (max-width: 500px){
	
	.logos-boundary2{
		display:grid;
		grid-template-columns:1fr 1fr;
	}
	
	.logo-case2{
		margin: 0 10px;
	}
	
	.logo-div{
		width: 140px;
		margin: 10px 20px;
		/* border:4px solid green; */
	}
	
	
	.brands-outer-box{
		position:relative;
		overflow-x:auto;
		
	}
	
	
	.brands-box{
		position:relative;
		display:flex;
		flex-wrap:nowrap;
		align-items:center;
		width: 750%;
		right:10%;
	}
	
	.brands-box2{
		position:relative;
		display:flex;
		flex-wrap:nowrap;
		align-items:center;
		width: 400%;
		right:10%;
	}
	
	.brands-box2{
		position:relative;
		display:flex;
		flex-wrap:nowrap;
		align-items:center;
		width: 250%;
		right:10%;
	}
	
	.single-brand-box{
		width:80%;
		/* border-right: 1px solid white; */
	}
	
	#alter{
		width:40%;
		/* padding-right: 2px;   */
		/* padding-left: 2px; */
		
	}
	
	#alter2{
		width:40%;
		margin-left: 25px;
		
	}
	
}