@keyframes spinner {
  to {
    transform: rotate(360deg); } }

@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotate(360deg); } }

.vc-gif-player .vc-gif-player-wrapper {
  display: inline-block;
  position: relative; }
  .vc-gif-player .vc-gif-player-wrapper img {
    z-index: 7;
    display: block;
    vertical-align: top; }

.vc-gif-player.vcgp-align-left {
  text-align: left; }

.vc-gif-player.vcgp-align-center {
  text-align: center; }

.vc-gif-player.vcgp-align-right {
  text-align: right; }

.vc-gif-player.vcgp-full-width .vc-gif-player-wrapper {
  width: 100%;
  height: auto; }
  .vc-gif-player.vcgp-full-width .vc-gif-player-wrapper img {
    width: 100%;
    height: auto; }

.vc-gif-player.vcgp-playing .vc-gif-player-wrapper:before, .vc-gif-player.vcgp-playing .vc-gif-player-wrapper:after {
  display: none !important; }

.vc-gif-player.vcgp-button-01 .vc-gif-player-wrapper:before {
  z-index: 8;
  content: 'GIF';
  width: 68px;
  height: 68px;
  text-align: center;
  line-height: 68px;
  color: #ffffff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3); }

.vc-gif-player.vcgp-button-01 .vc-gif-player-wrapper:after {
  z-index: 9;
  content: '';
  height: 56px;
  width: 56px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -28px;
  margin-left: -28px;
  border-radius: 50%;
  background-color: transparent;
  border: 3px dashed #ffffff;
  box-sizing: border-box; }

.vc-gif-player.vcgp-button-01.vcgp-loading .vc-gif-player-wrapper:after {
  -webkit-animation: spinner 2s linear infinite;
  -moz-animation: spinner 2s linear infinite;
  -ms-animation: spinner 2s linear infinite;
  -o-animation: spinner 2s linear infinite;
  animation: spinner 2s linear infinite; }

.vc-gif-player.vcgp-button-02 .vc-gif-player-wrapper:before {
  z-index: 8;
  content: '';
  width: 68px;
  height: 68px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  margin-top: -34px;
  margin-left: -34px;
  background-color: inherit;
  opacity: .3; }

.vc-gif-player.vcgp-button-02 .vc-gif-player-wrapper:after {
  z-index: 9;
  content: 'GIF';
  text-align: center;
  line-height: 56px;
  color: #ffffff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  height: 56px;
  width: 56px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: inherit;
  border-radius: 50%; }

.vc-gif-player.vcgp-button-02.vcgp-loading .vc-gif-player-wrapper:before {
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  box-sizing: border-box;
  -webkit-animation: spinner 1s linear infinite;
  -moz-animation: spinner 1s linear infinite;
  -ms-animation: spinner 1s linear infinite;
  -o-animation: spinner 1s linear infinite;
  animation: spinner 1s linear infinite; }

.vc-gif-player.vcgp-button-03 .vc-gif-player-wrapper:before {
  z-index: 8;
  content: '';
  width: 68px;
  height: 68px;
  text-align: center;
  line-height: 68px;
  color: #ffffff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' ?%3E%3Csvg height='14px' version='1.1' viewBox='0 0 13 14' width='13px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle/%3E%3Cdesc/%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-width='1'%3E%3Cg fill='%23ffffff' id='Icons-AV' transform='translate(-88.000000, -88.000000)'%3E%3Cg id='play-arrow' transform='translate(88.500000, 88.000000)'%3E%3Cpath d='M0,0 L0,14 L11,7 L0,0 Z' id='Shape'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center; }

.vc-gif-player.vcgp-button-03 .vc-gif-player-wrapper:after {
  z-index: 9;
  content: '';
  height: 56px;
  width: 56px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -28px;
  margin-left: -28px;
  border-radius: 50%;
  background-color: transparent;
  border: 3px dashed #ffffff;
  box-sizing: border-box; }

.vc-gif-player.vcgp-button-03.vcgp-loading .vc-gif-player-wrapper:after {
  -webkit-animation: spinner 2s linear infinite;
  -moz-animation: spinner 2s linear infinite;
  -ms-animation: spinner 2s linear infinite;
  -o-animation: spinner 2s linear infinite;
  animation: spinner 2s linear infinite; }

.vc-gif-player.vcgp-button-04 .vc-gif-player-wrapper:before {
  z-index: 8;
  content: '';
  width: 68px;
  height: 68px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  margin-top: -34px;
  margin-left: -34px;
  background-color: inherit;
  opacity: .3; }

.vc-gif-player.vcgp-button-04 .vc-gif-player-wrapper:after {
  z-index: 9;
  content: '';
  text-align: center;
  line-height: 56px;
  color: #ffffff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  height: 56px;
  width: 56px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: inherit;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' ?%3E%3Csvg height='14px' version='1.1' viewBox='0 0 13 14' width='13px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle/%3E%3Cdesc/%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-width='1'%3E%3Cg fill='%23ffffff' id='Icons-AV' transform='translate(-88.000000, -88.000000)'%3E%3Cg id='play-arrow' transform='translate(88.500000, 88.000000)'%3E%3Cpath d='M0,0 L0,14 L11,7 L0,0 Z' id='Shape'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center; }

.vc-gif-player.vcgp-button-04.vcgp-loading .vc-gif-player-wrapper:before {
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  -webkit-animation: spinner 1s linear infinite;
  -moz-animation: spinner 1s linear infinite;
  -ms-animation: spinner 1s linear infinite;
  -o-animation: spinner 1s linear infinite;
  animation: spinner 1s linear infinite; }