@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

body{
	margin: 0;
	padding:0;
	font-family: 'Lato',sans-serif;
	text-transform: uppercase;
	font-weight: 100;
	letter-spacing: 1px;
	overflow-x: hidden;
	overflow-y: hidden;
}

p{
	margin-bottom: 0;
}

h1{
	margin: 0;
	padding:0;
	font-family: 'Lato',sans-serif;
	text-transform: uppercase;
	font-weight: 100;
	letter-spacing: 1px;
	overflow-x: hidden;
	overflow-y: hidden;
	font-size: 12px;
}

.container{
	width: 100%;
	max-width: 300px;
	height: 300px;
	margin: auto;
	border-radius: 20px;
	text-align: center;
	margin-top: 25vh;
	position: relative;
}

@media screen and (max-width: 480px) {

	.container{
		margin-top: 15vh;
	}

}

.container p span{
	color: #000;
  -webkit-animation-name: changecolour; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 8s; /* Chrome, Safari, Opera */
  -webkit-animation-iteration-count: infinite;
  
  -moz-animation-name: changecolour;
  -moz-animation-duration: 8s;
  -moz-animation-iteration-count: infinite;

  -ms-animation-name: changecolour;
  -ms-animation-duration: 8s;
  -ms-animation-iteration-count: infinite;

  -o-animation-name: changecolour;
  -o-animation-duration: 8s;
  -o-animation-iteration-count: infinite;

  animation-name: changecolour;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

img{
	width: 50px;
	height: auto;
	cursor: pointer;
	margin-top: 21vh;
	z-index: 11;
	-webkit-animation: spinAround 2s linear infinite;
	-moz-animation: spinAround 2s linear infinite;
	animation: spinAround 2s linear infinite;
}

.box{
	width: 50px;
	height: 50px;
	background: hsl(120,50%,50%);
	position: absolute;
	bottom: 0;
	right: 0;
	transition: 0.1s;
	opacity: 0.1;
	border-radius: 50%;
}

@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes changecolour {
    0%   {color: #000;}
    25%  {color: #2F3C71;}
    50%  {color: #a7a9ac;}
    100%  {color: #941212;}
}

@-moz-keyframes changecolour {
    0%   {color: #000;}
    25%  {color: #2F3C71;}
    50%  {color: #a7a9ac;}
    100%  {color: #941212;}
}

@-ms-keyframes changecolour {
    0%   {color: #000;}
    25%  {color: #2F3C71;}
    50%  {color: #a7a9ac;}
    100%  {color: #941212;}
}

@-o-keyframes changecolour {
    0%   {color: #000;}
    25%  {color: #2F3C71;}
    50%  {color: #a7a9ac;}
    100%  {color: #941212;}
}

@keyframes changecolour {
    0%   {color: #000;}
    25%  {color: #2F3C71;}
    50%  {color: #a7a9ac;}
    100%  {color: #941212;}
}