@keyframes slidy {
0% { transform: translateX(0);}
20% { transform: translateX(0);}
30% { transform: translateX(-20%);}
50% { transform: translateX(-20%);}
60% { transform: translateX(-40%);}
80% { transform: translateX(-40%);}
90% { transform: translateX(0%);}
}

#social{
	position: absolute;
	width: 50px;
	height: auto;
	display: inline-block;
	top: 20px;
	left: 0;
	z-index: 99;
}
#social a{
	width: 100%;
	height: auto;
	display: inline-block;
	margin: 5px 0;
}

#social a img{
	width: 100%;
	height: auto;
}

#social a:hover{
	transform: perspective(50px) rotateY(10deg);
}

#Content {
    height: 100vh;
    color: #000;
}

#Logo{
   display: block;
   position: absolute;
    
    width: 30vw;
    height: 30vh;
    
    top: 35vh;
    left: 40vw;
    
    background-image: url(../src/pic/logo.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#slider{
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
  overflow: hidden;
}

#band{
    width: 500%;
    height: 100%;
    
    animation: 20s slidy infinite; 
}

.sIMG { 
    width: 20%; 
    height: 100%;
    float: left;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 150px) and (max-width: 720px) {
    #Content{
        height: 90vh;
    }
}