@import url('https://fonts.googleapis.com/css?family=Oswald');

*{    box-sizing: border-box;
}


body{ background:black; color:white; font-family:'Oswald', sans-serif;}

.site{ max-width:960px; margin:0 auto; text-align:center;}

.center{ text-align:center;}

h2{ text-transform:uppercase; font-weight:normal; font-size:18px;}

a{ color: white; text-decoration:none; text-transform:uppercase; opacity:0.5; letter-spacing:4px; transition: all 0.5s ease-in-out}

a:hover{ text-shadow: 0px 0px 4px rgb(0, 255, 255), 0px 2px 4px rgb(0, 255, 255);; opacity:1; letter-spacing:8px; font-size:1em;}



footer{ color:#555; font-family: arial, sans-serif; padding:50px; clear:both;}


.img_gallery{ clear:both;}
.img_gallery ul{ list-style:none; }
.img_gallery ul li{ float:left; width:50%;}
.img_gallery ul li img{ width:100%; padding:5px;}


.logo{ width:200px; margin: 0 auto;}


img.center{ width:80%; }


/* The animation code */
@keyframes example {
    0%   {opacity:0.99}
    15%  {opacity:0.80;}
    18%  {opacity:0.99;}
    20%  {opacity:0.85;}
    35%  {opacity:0.60;}
    45%  {opacity:0.99;}
    50%  {opacity:0.70;}
    55%  {opacity:0.80;}
    65%  {opacity:0.95;}
    70%  {opacity:0.90;}
    80%  {opacity:0.80;}
    85%  {opacity:0.60;}
    95%  {opacity:0.39;}
    100% {opacity:0.99;}

}

img.center:hover {    animation-name: none;}

/* The element to apply the animation to */
img.center {
	padding:80px 0px;
	transition: all 1s ease-in-out;

    animation-name: example;
    animation-duration: 5s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}