@font-face{
  font-family:'museosans-700';
  src:url('http://extras.ig.com.br/fonts/museosans/museosans-700/museosans-700.eot');
  src:url('http://extras.ig.com.br/fonts/museosans/museosans-700/museosans-700.eot')format('embedded-opentype'),
  url('http://extras.ig.com.br/fonts/museosans/museosans-700/museosans-700.woff')format('woff'),
  url('http://extras.ig.com.br/fonts/museosans/museosans-700/museosans-700.ttf')format('truetype')
}

.controlsSprite{
  background-color: transparent;
  background-image: url('http://i0.statig.com.br.br/tvig/player/controls-sprite.png');
}

/* pagina */
body{
  margin : 0;
  padding: 0;
}

/* puff feedback */
.puffFeedback{
  display: none;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  margin: -38px 0 0 -60px;
  width: 120px;
  height: 76px;
}
.puffFeedback.play   { background-position: -496px -244px; }
.puffFeedback.pause  { background-position: -496px -158px; }
.puffFeedback.mute   { background-position: 0 -318px; }
.puffFeedback.unmute { background-position: 0 -404px; }


/* elemento pai */
.bgCinza{
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: hidden;
  font: normal 1em sans-serif;
  width: 640px !important;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.tvigVideoPlayer{
  -webkit-transition: -webkit-filter 150ms ease-in-out;
  -moz-transition   : -moz-filter 150ms ease-in-out;
  -ms-transition    : -ms-filter 150ms ease-in-out;
  -o-transition     : -o-filter 150ms ease-in-out;
  transition        : filter 150ms ease-in-out;
}

.bgCinza .botVideo{
  background: #f1f1f1;
  padding: 5px 0;
  margin: 0 0 15px 0;
  height: 15px;
}

/* controles e barras */
.controlsWrapper{
  display: block;
  position: absolute;
  bottom: 0;
  height: 60px;
  width: 100%;
}
.playerControls{
  display: none;
  position: absolute;
  width: 618px;
  height: 42px;
  margin: 0;
  padding: 0;
  left: 10px;
  bottom: 10px;
  background-color: #000;
  background-color: rgba(0, 0, 0, .6);
  border-radius: 3px;
  z-index: 2;

  -webkit-transition: all 100ms ease-out;
     -moz-transition: all 100ms ease-out;
      -ms-transition: all 100ms ease-out;
       -o-transition: all 100ms ease-out;
          transition: all 100ms ease-out;
}

.controlsWrapper:hover .playerControls{
  display: block;
}

.playerControls .button{
  position: absolute;
  overflow: hidden;
  border: 0 none;
  cursor: pointer;
  text-indent: -9999px;
  background-color: transparent;
}

/* play e pause */
.playerControls .btnPlay{
  top: 5px;
  left: 5px;
  width: 45px;
  height: 32px;
  background-position: 0 0;
}
.playerControls .btnPlay:hover{
  background-position: 0 -42px;
}
.playerControls .btnPlay:active{
  background-position: 0 -84px;
}
.playerControls .btnPause{
  top: 5px;
  left: 5px;
  width: 45px;
  height: 32px;
  background-position: -55px 0;
}
.playerControls .btnPause:hover{
  background-position: -55px -42px;
}
.playerControls .btnPause:active{
  background-position: -55px -84px;
}

/* resolucao */
.playerControls .btnResolution{
  top: 6px;
  right: 110px;
  width: 69px;
  height: 30px;
  border-radius: 3px;
  background-color: #000;
}
.playerControls .r1080{
  background-position: -415px -95px;
}

/* volume */
.playerControls .btnVolume{
  top: 6px;
  right: 75px;
  width: 30px;
  height: 30px;
  background-position: -110px -1px;
}
.playerControls .btnVolume:hover{
  background-position: -110px -43px;
}
.playerControls .btnVolume:active{
  background-position: -110px -85px;
}

/* wide screen */
.playerControls .btnWide{
  top: 6px;
  right: 40px;
  width: 30px;
  height: 30px;
  background-position: -193px -1px;
}
.playerControls .btnWide:hover{
  background-position: -193px -43px;
}
.playerControls .btnWide:active{
  background-position: -193px -85px;
}

/* full screen */
.playerControls .btnFullScreen{
  top: 6px;
  right: 5px;
  width: 30px;
  height: 30px;
  background-position: -234px -1px;
}
.playerControls .btnFullScreen:hover{
  background-position: -234px -43px;
}
.playerControls .btnFullScreen:active{
  background-position: -234px -85px;
}

/* barra de progresso */
.playerControls .progressbarWrapper{
  position: absolute;
  top: 16px;
  left: 58px;
  width: 370px;
  height:10px;
}
.progressbarWrapper .progressbar{
  position: relative;
  display: block;
  width: 370px;
  height: 10px;
  background-color: #000;
  cursor: pointer;
}
.progressbarWrapper .bufferbar{
  position: absolute;
  top: 2px;
  left: 2px;
  max-width: 366px;
  background-position: 0 -136px;
  height:6px;

  -webkit-transition: left 50ms ease;
     -moz-transition: left 50ms ease;
      -ms-transition: left 50ms ease;
       -o-transition: left 50ms ease;
          transition: left 50ms ease;

  -webkit-animation-name: barload;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: barload;
  -moz-animation-timing-function: linear;
  -moz-animation-duration: 500ms;
  -moz-animation-iteration-count: infinite;
  -ms-animation-name: barload;
  -ms-animation-timing-function: linear;
  -ms-animation-duration: 500ms;
  -ms-animation-iteration-count: infinite;
  -o-animation-name: barload;
  -o-animation-timing-function: linear;
  -o-animation-duration: 500ms;
  -o-animation-iteration-count: infinite;
  animation-name: barload;
  animation-timing-function: linear;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
}
@-webkit-keyframes barload{
  from { background-position: 0 -136px; }
  to   { background-position: -11px -136px; }
}
@-moz-keyframes barload{
  from { background-position: 0 -136px; }
  to   { background-position: -11px -136px; }
}
@-ms-keyframes barload{
  from { background-position: 0 -136px; }
  to   { background-position: -11px -136px; }
}
@-o-keyframes barload{
  from { background-position: 0 -136px; }
  to   { background-position: -11px -136px; }
}
@keyframes barload{
  from { background-position: 0 -136px; }
  to   { background-position: -11px -136px; }
}

.progressbarWrapper .bar{
  position:absolute;
  top: 2px;
  left: 2px;
  max-width: 366px;
  background-position: 0 -146px;
  height: 6px;

  -webkit-transition: all 50ms ease;
     -moz-transition: all 50ms ease;
      -ms-transition: all 50ms ease;
       -o-transition: all 50ms ease;
          transition: all 50ms ease;
}
.progressbarWrapper .bar .btnProg{
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  top: -4px;
  right: -7px;
  content: "";
  overflow: hidden;
  background-position: 0 -158px;
}
.progressbarWrapper .bar .btnProg:active{
  background-position: -20px -158px;
}

/* hovers */
.controlsWrapper .hoversWrapper{
  position: relative;
  top: -118px;
  width: 618px;
  height: 115px;
}
.hoversWrapper .hover{
  position: absolute;
  bottom: 0;
}
.hoversWrapper .hLabel{
  position: absolute;
  left: 34px;
  width: 50px;
  height: 20px;
  padding: 5px;
  color: #fff;
  font: bold 12px sans-serif;
  text-align: center;
  background-position: -498px -97px;
}
.hoversWrapper .hResolution{
  display: none;
  width: 70px;
  height: 123px;
  right: 109px;
  background-position: -493px -4px;
}
.hoversWrapper .hResolution ul{
  list-style: none outside;
  margin: 0;
  padding: 0;
}
.hoversWrapper .hResolution li{
  margin: 4px;
  padding: 0;
  cursor: pointer;
}
.hoversWrapper .hResolution a{
  display: block;
  direction: ltr;
  width: 61px;
  height: 19px;
  text-indent: 9999px;
  overflow: hidden;
}
.hResolution .p240  { background-position: -275px -1px; }
.hResolution .p320  { background-position: -275px -26px; }
.hResolution .p480  { background-position: -275px -51px; }
.hResolution .p720  { background-position: -275px -76px; }
.hResolution .p1080 { background-position: -275px -101px; }

.hoversWrapper .hVolume{
  display: none;
  width: 30px;
  height: 90px;
  right: 74px;
  background-position: -512px -37px;
}
.playerControls .hVolume .volumeWrapper{
  width: 20px;
  height: 72px;
  margin: 5px;
  padding: 4px 0 0 0;
  background-color: #282828;
  outline: 1px solid #000;
}
.playerControls .hVolume .vBarWrapper{
  position: relative;
  width: 5px;
  height: 68px;
  margin: 0 0 0 8px;
  background: #3a3a3a;
  outline: 1px solid #000;
  z-index: 2;
}
.playerControls .hVolume .volumeBar{
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 5px;
  height: 50%;
  background: #9ec4f3;
  z-index: 2;
}
.playerControls .hVolume .btnVolumeBar{
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  bottom: 100px;
  left: -4px;
  overflow: hidden;
  background-position: 0 -158px;
  z-index: 3;
}
.playerControls .hVolume .btnVolumeBar:active{
  background-position: -20px -158px;
}

/* ads */
.preroll, .postroll{
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 5;
  font: bold 2em sans-serif;
  text-align: center;
  color: white;
  -webkit-transition:all 500ms ease-in;
  -moz-transition:all 500ms ease-in;
  -ms-transition:all 500ms ease-in;
  -o-transition:all 500ms ease-in;
  transition:all 500ms ease-in;
}
.preroll{
  display: block;
  opacity: 1;
}




/* botoes de redes sociais e infos do video */
/*
.progressbarWrapper{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5px;
}
.progressbar{
  position:relative;
  display:block;
  width:100%;
  height:5px;
  padding:0;
  margin:0;
}
.progressbar:before{
  position:absolute;
  display:block;
  content:"";
  width:100%;
  height:5px;
  top:0;
  left:0;
  background:#222;
}
.bar {
  position: absolute;
  display: block;
  width: 0;
  height: 5px;
  left: 0;
  overflow: hidden;
  background: rgb(24,109,226);
  z-index: 3;
  -webkit-transition: all 50ms ease;
     -moz-transition: all 50ms ease;
      -ms-transition: all 50ms ease;
       -o-transition: all 50ms ease;
          transition: all 50ms ease;

  box-shadow:       0    0   12px 0 rgba(24, 109, 226, 1),
              inset 0    1px 0    0 rgba(255, 255, 255, 0.45),
              inset 1px  0   0    0 rgba(255, 255, 255, 0.25),
              inset -1px 0   0    0 rgba(255, 255, 255, 0.25);
}
.playerControls:hover .progressbar,
.playerControls:hover .progressbar:before,
.playerControls:hover .bar {
  height: 10px;
}
.playerControls:hover .progressbar{
  bottom: 70px;
}

.playerControls .bar span {
  position:absolute;
  display:block;
  width:100%;
  height:64px;
  top:0;
  left:0;
  opacity:0.2;
}
.playerControls:hover .bar span{
  border-radius:16px;
}

.playerControls .bufferbar {
  position: absolute;
  display: block;
  width: 0;
  height: 5px;
  left: 0;
  overflow: hidden;
  background: #666;
  z-index: 3;
  -webkit-transition: all 50ms ease;
     -moz-transition: all 50ms ease;
      -ms-transition: all 50ms ease;
       -o-transition: all 50ms ease;
          transition: all 50ms ease;
}
.playerControls:hover .bufferbar {
  height: 10px;
}

.playerControls .tLabel{
  display: none;
  position: absolute;
  bottom: 0.5em;
  left: 2em;
  font: bold 2em 'museosans-700', sans-serif;
  text-shadow:1px 1px 1px #000;
  color:#fff;
}
.playerControls:hover .tLabel{
  display: block;
}

#socialHover{
  display:none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  color: white;
  background: rgba(0, 0, 0, .4);
}
#socialHover h2{
  display: inline-block;
  margin: .5em;
  padding: 0.5em;
  max-width: 420px;
  font-size: 1.3em;
  background: rgba(0, 96, 170, .5);
}
#socialHover ul {
  position: absolute;
  min-width: 190px;
  margin: 1em;
  top: .5em;
  right: 0;
}
#socialHover li {
  display:block;
  width:190px;
  height:30px;
  margin: 0 0 1em 0;
  padding: 0;
  line-height: 30px;
  color: white;
  overflow:hidden;

  -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
       -o-filter: grayscale(100%);
          filter: grayscale(100%);
}
#socialHover li:hover {
  -webkit-filter: grayscale(0);
     -moz-filter: grayscale(0);
      -ms-filter: grayscale(0);
       -o-filter: grayscale(0);
          filter: grayscale(0);
}
#socialHover li a{
  display: block;
  padding: 0 40px 0 0;
  text-align: right;
  text-indent: 99999px;
  text-decoration: none;
  text-shadow: 1px 1px #000;
  overflow: hidden;
  color: #fff;
}
#socialHover li a:hover {
  text-indent:0;
}
#socialHover .twitter{
  background:transparent url('http://i0.statig.com.br.br/tvig/player/ico-twitter.png') no-repeat right;
}
#socialHover .facebook{
  background:transparent url('http://i0.statig.com.br.br/tvig/player/ico-facebook.png') no-repeat right;
}
#socialHover .googleplus{
  background:transparent url('http://i0.statig.com.br.br/tvig/player/ico-googleplus.png') no-repeat right;
}
#socialHover .embed{
  background:transparent url('http://i0.statig.com.br.br/tvig/player/ico-embed.png') no-repeat right;
}
#socialHover .url{
  background:transparent url('http://i0.statig.com.br.br/tvig/player/ico-url.png') no-repeat right;
}
*/