@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	color: #333;
	background-image: url(/images/zombo_bg.png);
	background-repeat: repeat-x;
}

ul, ol, dl { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}
a img { border: none; }
a:link { color: #42413C; text-decoration: underline; }
a:visited { color: #6E6C64; text-decoration: underline; }
a:hover, a:active, a:focus { text-decoration: none; }

.container {
	width: 960px;
	background-color: #FFF;
	margin: 0 auto;
}
.content { padding: 10px 0; }

.fltrt { float: right; margin-left: 8px; }
.fltlft { float: left; margin-right: 8px; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }

.rotate {
  animation: rotation .5s infinite linear;
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:.1; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:.1; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:.1; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:.1; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation .3s infinite;
   -moz-animation: flickerAnimation .3s infinite;
   -o-animation: flickerAnimation .3s infinite;
   animation: flickerAnimation .3s infinite;
   margin-top:13%;
}

audio { display: none; }

button {
    font-size: 22px;
    color: #eee;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    padding: 5px;
    border: none;
    border-radius: 2px;
    outline: none;
    background: black;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.4s ease-out;
}

button.fade:hover { opacity: 0.8; }

.fade {
  opacity: 0.2;
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

img { max-width: 100%; height: auto; }

/* Responsive */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%; }  
}
@media screen and (max-width: 768px) {
    #primary { width:80%; }
    #secondary { width:80%; margin:0; border:none; }
}