@-moz-keyframes agggif-spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes agggif-spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes agggif-spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
.agggif-align-center {
text-align: center;
}
.agggif-align-left {
float: left;
margin: 0 15px 10px 0;
}
.agggif-align-right {
float: right;
margin: 0 0 10px 15px;
}
.agggif-container {
display: block;
}
.agggif-container > div {
display: inline-block;
max-width: 100%;
}
.agggif-container .jsgif {
position: relative;
z-index: 2;
}
.agggif-container .jsgif > canvas {
max-width: 100%;
vertical-align: top;
}
.agggif-inner {
position: relative;
display: inline-block;
clear: both;
max-width: 100%;
}
.agggif-container:not(.agggif-autoplay) .agggif-image {
display: none;
}
.agggif-preview {
max-width: 100%;
vertical-align: top;
}
.agggif-loading .agggif-preview,
.agggif-loaded .agggif-preview {
position: absolute;
z-index: 1;
}
.agggif-overlay {
display: block;
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.agggif-control {
position: absolute;
top: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
display: inline-block;
width: 72px;
height: 72px;
padding: 3px;
border-radius: 72px;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 66px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.4);
}
.agggif-autoplay.agggif-loading .agggif-control,
.agggif-playing .agggif-control,
.agggif-playing .agggif-preview {
display: none;
}
.agggif-control:before {
content: " ";
display: block;
position: absolute;
left: 3px;
top: 3px;
width: 66px;
height: 66px;
border: 3px dashed #fff;
border-radius: 66px;
}
.agggif-loading:not(.agggif-loaded) .agggif-control:before {
-webkit-animation: agggif-spin 3s linear infinite;
-o-animation: agggif-spin 3s linear infinite;
animation: agggif-spin 3s linear infinite;
}
.agggif-loaded .agggif-control:before {
-webkit-animation: none;
-o-animation: none;
animation: none;
}