/*------------------------------------*\
  CSS Reset
\*------------------------------------*/

* {
  margin: 0;
  padding: 0;
  font-style: inherit;
  cursor: default;
  outline: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

/*------------------------------------*\
  Styles
\*------------------------------------*/


html {
	border: 30px solid #ffffff;
	height: 100%;
}

body
{
	font-family: sans-serif;
	font-size: 100%;
	margin: 10px;
	color: #ddd;
	background-image: linear-gradient(-60deg, #ebf0f6 0%, #d8dadd 100%);
}

a { color: #000; }


img.resp
{
	position: absolute;
	max-width: 80%;
	max-height: 80%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	
	cursor: pointer;

}

@-webkit-keyframes animimage {
    0% { -webkit-transform: translate(0px, 5px) ; }
    100% { -webkit-transform: translate(0px, -15px);  }
}
@-moz-keyframes animimage {
      0% { background-position: 0 0; }
    100% { background-position: 0 600%; }
}

.myanim{
    margin-bottom: 5px;
    margin-right: auto;
    margin-left: auto;
     animation: animimage 1s linear 0s infinite alternate;
    -webkit-animation: animimage 2s linear 0s infinite alternate;
    -moz-animation: animimage 2s linear 0s infinite alternate;
}


/* - - - - - - - - - */

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

html { border: 15px solid #ffffff; }
img.resp { max-width: 92%; max-height: 92%; }

}