body {margin:0;padding:0;width:100%;
    font-family: 'Roboto', sans-serif;
	color:#000;
 }
 
  #bg {background-image: url(bg.jpg);
  position:fixed;
  width:100vw;height:100vh;z-index:-1;
  background-position:50% 50%;
  background-size:cover;
  background-repeat:no-repeat;}
 
 #wrapper {position:absolute;top:20%;left:50%;margin-left:-120px;width:240px;text-align:center;}
.letter {font-size:40px;color:white;
width:80px;height:80px;border-radius:40px;
text-align:center;
line-height:80px;
display:inline-block;
font-weight:700;
}

#wrapper:hover .letter {animation:none;}


.letterE {background-color:rgba(51,175,192,0.8);animation: rotatelet 2s ease-out infinite;}
.letterS {background-color:rgba(205,9,110,0.8);animation: rotatelet 1.6s ease-out infinite;margin-left:-20px;}
.letterP {background-color:rgba(19,114,190,0.8);animation: rotatelet 2.1s ease-out infinite;margin-left:-20px;}

.letterE {animation-delay:0s}
.letterS {animation-delay:0.75s}
.letterP {animation-delay:0.5s}


@keyframes rotatelet {
	0% {  transform: rotateY(0deg);filter:brightness(1);}
	12% {filter:brightness(0.75);}
	50% { transform: rotateY(180deg);filter:brightness(0.75);}
	62% {filter:brightness(0.75);}
	100% {  transform: rotateY(0deg);filter:brightness(1);}
	
}

.promo {font-size:25px;text-align:center;padding-top:5px;}
.info {font-size:12px;text-align:center;padding-top:15px;}
.detail {color:#222}