#top-menu li {
padding-right: 16px;
} #overlay {
display: block;
width: 500px;
height: 500px;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%); z-index: 99999;
cursor: pointer;
border: 2px solid white;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
animation: colorchange 30s; -webkit-animation: colorchange 30s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes colorchange {
0%   {background: red;}
50%  {background: olive;}
100% {background: red;}
}
@-webkit-keyframes colorchange {
0%   {background: red;}
50%  {background: olive;}
100% {background: red;}
}
@media (max-width: 1000px) {
#overlay {
display: block;
width: 89%;
height: 500px;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background-color: rgba(238, 120, 17, 0.91);
z-index: 99999;
cursor: pointer;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
}
#text{
position: absolute;
width: 100%;
top: 50%;
left: 50%;
font-size: 16px;
color: white;
line-height: normal;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#x {
position: absolute;
top: -20px;
right: -20px;
}
.animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: 33;
-webkit-animation-iteration-count: 33;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateX(0);
}
50% {
-webkit-transform: translateX(-5px);
}
}
@keyframes bounce {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-5px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}