/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: white;
  font-family: Verdana;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
@font-face {
   font-family: myFirstFont;
   src: url(LTFlodeNeue-Bold.otf);
}

* {
   font-family: myFirstFont;
}
ul {
  list-style: none;
}
.grow:hover {
	font-size:larger;
}

*{transition:.5s}

@keyframes turner{
  0%   { transform:rotateX(0deg); }
  10%  { transform:rotateX(0deg); }
  50%  { transform:rotateX(360deg);}
  60%  { transform:rotateX(360deg);}
  100% { transform:rotateX(0deg);}
  100% { transform:rotateX(0deg);}
}
.container{
  perspective: 400px;
  font-size: 0;  
  height:20vw;
}
.wrapper {
  width:65vw;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  left:calc(50% - (65vw / 2));

}
/* 1200 x 400 */
.wrapper div {
  width:calc(65vw / 50);
  height:20vw;
  background-image: url(logo.png);	
  background-size: cover;
  backface-visibility: visible;
  animation-name: turner;
  animation-duration:20s;
  animation-iteration-count:1;
  display:inline-block;
  border:0;
  white-space:nowrap;
}
.one {
  background-position:0 0;
}
.one2 {
  background-position:-100% 0;
  animation-delay: .1s;
}
.one3 {
  background-position:-200% 0;
  animation-delay: .2s;
}
.one4 {
  background-position:-300% 0;
  animation-delay: .3s;
}
.one5 {
  background-position:-400% 0;
  animation-delay: .4s;
}
.one6 {
  background-position:-500% 0;
  animation-delay: .5s;
}
.one7 {
  background-position:-600% 0;
  animation-delay: .6s;
}
.one8 {
  background-position:-700% 0;
  animation-delay: .7s;
}
.one9 {
  background-position:-800% 0;
  animation-delay: .8s;
}
.one10{
  background-position:-900% 0;
  animation-delay: .9s;
}
.one11 {
  background-position:-1000% 0;
  animation-delay: 1s;
}
.one12 {
  background-position:-1100% 0;
  animation-delay: 1.1s;
}
.one13 {
  background-position:-1200% 0;
  animation-delay: 1.2s;
}
.one14 {
  background-position:-1300% 0;
  animation-delay: 1.3s;
}
.one15{
  background-position:-1400% 0;
  animation-delay: 1.4s;
}
.one16{
  background-position:-1500% 0;
  animation-delay: 1.5s;
}
.one17{
  background-position:-1600% 0;
  animation-delay: 1.6s;
}
.one18{
  background-position:-1700% 0;
  animation-delay: 1.7s;
}
.one19{
  background-position:-1800% 0;
  animation-delay: 1.8s;
}
.one20{
  background-position:-1900% 0;
  animation-delay: 1.9s;
}
.one21{
  background-position:-2000% 0;
  animation-delay: 2s;
}
.one22{
  background-position:-2100% 0;
  animation-delay: 2.1s;
}
.one23{
  background-position:-2200% 0;
  animation-delay: 2.2s;
}
.one24{
  background-position:-2300% 0;
  animation-delay: 2.3s;
}
.one25{
  background-position:-2400% 0;
  animation-delay: 2.4s;
}
.one26{
  background-position:-2500% 0;
  animation-delay: 2.5s;
}
.one27{
  background-position:-2600% 0;
  animation-delay: 2.6s;
}
.one28{
  background-position:-2700% 0;
  animation-delay: 2.7s;
}
.one29{
  background-position:-2800% 0;
  animation-delay: 2.8s;
}
.one30{
  background-position:-2900% 0;
  animation-delay: 2.9s;
}
.one31{
  background-position:-3000% 0;
  animation-delay: 3s;
}
.one32{
  background-position:-3100% 0;
  animation-delay: 3.1s;
}
.one32{
  background-position:-3100% 0;
  animation-delay: 3.1s;
}
.one33{
  background-position:-3200% 0;
  animation-delay: 3.2s;
}
.one34{
  background-position:-3300% 0;
  animation-delay: 3.3s;
}
.one35{
  background-position:-3400% 0;
  animation-delay: 3.4s;
}
.one36{
  background-position:-3500% 0;
  animation-delay: 3.5s;
}
.one37{
  background-position:-3600% 0;
  animation-delay: 3.6s;
}
.one38{
  background-position:-3700% 0;
  animation-delay: 3.7s;
}
.one39{
  background-position:-3800% 0;
  animation-delay: 3.8s;
}
.one40{
  background-position:-3900% 0;
  animation-delay: 3.9s;
}
.one41{
  background-position:-4000% 0;
  animation-delay: 4.0s;
}
.one42{
  background-position:-4100% 0;
  animation-delay: 4.1s;
}
.one43{
  background-position:-4200% 0;
  animation-delay: 4.2s;
}
.one44{
  background-position:-4300% 0;
  animation-delay: 4.3s;
}
.one45{
  background-position:-4400% 0;
  animation-delay: 4.4s;
}
.one46{
  background-position:-4500% 0;
  animation-delay: 4.5s;
}
.one47{
  background-position:-4600% 0;
  animation-delay: 4.6s;
}

@media all and (max-width: 450px) {
    .wrapper{
		width:100vw;
        left: 0px;
    }
	.wrapper div {
		height:31vw;
		width:calc(100vw / 50);
	}
	.container{
	  height:30vw;
	}
}