#encuesta-batman-superman {
display: block;
background-color: #000;
height: 312px;
background-image: url(http://www.emol.com/especiales/fotos/2016/magazine/batman-vs-superman/bg_encuesta.jpg);
background-repeat: no-repeat;
background-position: center center;
position: relative;
overflow: hidden;
}

#encuesta-batman-superman div.infoenc-box {
display: inline-block;
width: 50%;
height: 312px;
background-repeat: no-repeat;
position: relative;
}

#encuesta-batman-superman div.infoenc-box > div {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
top:145px;
height: 34px;
line-height: 34px;
color: #fff;
cursor: pointer;
}

#encuesta-batman-superman div.infoenc-box > div:hover {
color: #FB870C;
}

#encuesta-batman-superman.inactivo div.infoenc-box > div {
cursor: default;
}

#encuesta-batman-superman.inactivo div.infoenc-box > div {
color: transparent;
}

#encuesta-batman-superman div.infoenc-box > div > div.infoenc-res {
display: none;
transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

#encuesta-batman-superman.inactivo div.infoenc-box > div > div.infoenc-res {
display: block;
}

#encuesta-batman-superman.inactivo div.infoenc-box > div > div.infoenc-res span {
position: absolute;
top:-35px;
color: #fff;
font-size: 20px;
font-weight: bold;
min-width: 140px;
}

#encuesta-batman-superman.inactivo div.infoenc-box > div > div.infoenc-res span i {
font-size: 13px;
font-weight: normal;
margin:0px 10px;
}


#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="batman"] > div > div.infoenc-res span {
right:15px;
}


#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="superman"] > div > div.infoenc-res span {
left:15px;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="batman"] > div > div.infoenc-res {
background-color: #004e66;
position: absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="superman"] > div > div.infoenc-res {
background-color: #480000;
position: absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="batman"] > div > div.infoenc-res > div {
position: absolute;
top:0px;
bottom:0px;
right:0px;
width:0%;
background-color: #52badb;
transition: width 0.4s linear;
  -webkit-transition: width 0.4s linear;
  -ms-transition: width 0.4s linear;
  -moz-transition: width 0.4s linear;
  -o-transition: width 0.4s linear;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="batman"] > div > div.infoenc-res > div:after {
content: 'Batman';
position: absolute;
bottom:-35px;
right:10px;
color: #fff;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="superman"] > div > div.infoenc-res > div:after {
content: 'Superman';
position: absolute;
bottom:-35px;
left:10px;
color: #fff;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="superman"] > div > div.infoenc-res > div {
position: absolute;
top:0px;
bottom:0px;
left:0px;
width:0%;
background-color: #c02e40;
transition: width 0.4s linear;
  -webkit-transition: width 0.4s linear;
  -ms-transition: width 0.4s linear;
  -moz-transition: width 0.4s linear;
  -o-transition: width 0.4s linear;
}

#encuesta-batman-superman div.infoenc-box > div img {
position: absolute;
top:-22px;
}

#encuesta-batman-superman > h3 {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
left:0px;
top:20px;
margin:0px;
color: #e9eaea;
text-transform: uppercase;
font-size: 25px;
font-weight: bold;
background-color: #ffffff;
background-color: rgba(255,255,255,0.1);
z-index: 10;
height: 39px;
line-height: 39px;
padding: 0px 25px 0px 20px;
display: block;
text-shadow: 3px 3px 10px #000;
}

#encuesta-batman-superman.cargando:after {
content: '';
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
background-image: url(http://www.emol.com/especiales/fotos/2016/magazine/batman-vs-superman/load.gif);
background-repeat: no-repeat;
background-position: center center;

}

#encuesta-batman-superman.cargando div {
display: none;
}

#encuesta-batman-superman div.infoenc-box[data-enc="batman"] {
background-image: url(http://www.emol.com/especiales/fotos/2016/magazine/batman-vs-superman/batman.png);
background-position: left center;
}

#encuesta-batman-superman div.infoenc-box[data-enc="superman"] {
background-image: url(http://www.emol.com/especiales/fotos/2016/magazine/batman-vs-superman/superman.png);
background-position: right center;
}

#encuesta-batman-superman div.infoenc-box[data-enc="batman"] > div:before {
content: '●';
padding: 5px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="batman"] > div:after {
content: '';
position: absolute;
right:-47px;
bottom:-180px;
transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
width: 0;
height: 0;
border-style: solid;
border-width: 0 17.5px 15px 17.5px;
border-color: transparent transparent #fff transparent;
}

#encuesta-batman-superman div.infoenc-box[data-enc="superman"] > div:after {
content: '';
position: absolute;
left:-47px;
bottom:-300px;
transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
width: 0;
height: 0;
border-style: solid;
border-width: 0 17.5px 15px 17.5px;
border-color: transparent transparent #fff transparent;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="batman"] > div:after,
#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="superman"] > div:after {
display: none;
}

#encuesta-batman-superman div.infoenc-box[data-enc="batman"] > div:hover:after {
position: absolute;
bottom:-60px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="superman"] > div:hover:after {
position: absolute;
bottom:-60px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="superman"] > div:before {
content: '●';
padding: 5px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="batman"] > div {
right:80px;
left:0px;
text-align: right;
padding-right:20px;
background: #1191bc;
background: -moz-linear-gradient(left,  transparent 0%, #1191bc 100%);
background: -webkit-linear-gradient(left,  transparent 0%,#1191bc 100%);
background: linear-gradient(to right,  transparent 0%,#1191bc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#1191bc',GradientType=1 );
transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

#encuesta-batman-superman div.infoenc-box[data-enc="batman"] > div img {
right:-70px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="superman"] > div {
left:80px;
right:0px;
background-color: #670000;
text-align: left;
padding-left:20px;
background: #670000;
background: -moz-linear-gradient(left,  #670000 0%, transparent 100%);
background: -webkit-linear-gradient(left,  #670000 0%,transparent 100%);
background: linear-gradient(to right,  #670000 0%,transparent 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#670000', endColorstr='transparent',GradientType=1 );
transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

#encuesta-batman-superman div.infoenc-box[data-enc="superman"] > div img {
left:-70px;
}

@media (max-width: 460px) {

#encuesta-batman-superman > h3 {
left:0px;
right:0px;
font-size: 22px;
padding:0px;
text-align: center;
}

#encuesta-batman-superman div.infoenc-box > div {
top: 245px;
width:auto;
}

#encuesta-batman-superman div.infoenc-box > div img {
top:-100px;
}

#encuesta-batman-superman.inactivo div.infoenc-box > div img {
top:-120px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="batman"] > div {
right:10px;
left:-10px;
padding-right:10px;
width:100%;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="batman"] > div {
padding-right:0px;
left:0px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="batman"] > div img {
right:15px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="superman"] > div {
left:0px;
right: -10px;
padding-left:10px;
width:100%;
}

#encuesta-batman-superman.inactivo div.infoenc-box[data-enc="superman"] > div {
padding-left:0px;
right:0px;
}

#encuesta-batman-superman div.infoenc-box[data-enc="superman"] > div img {
left:15px;
}

#encuesta-batman-superman.inactivo div.infoenc-box > div > div.infoenc-res span i {
font-size: 11px;
}

}