@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
/*font-family: 'Rubik Mono One', sans-serif;*/

body {padding: 0;margin:0;font-family: sans-serif;color:#000;}
.clear{clear:both;}

header{margin-bottom:50px;text-align: center;}
header #Logo{display:inline-block;;width:750px;;margin:0 0 10px;}
header img{display:block;}
header #Social{margin: 0;width: 285px;float: right;margin:10px 10px 0 0;}
header #Social a{display:block;float: left;margin:0 0 0 5px;}
header #Social a#Facebook{background: #3b5998;}
header #Social a#Facebook:hover{background: #2c4780;}
header #Social a#Twitter{background: #4099ff;}
header #Social a#Twitter:hover{background: #348bf0;}
header #Social a#Google{background: #cb4437;}
header #Social a#Google:hover{background: #bd3b2e;}
header #ContentTitulo{margin:25px 0 15px;}
header #ContentTitulo h1{margin:0;padding:0;font-family:'Rubik Mono One', sans-serif;font-size: 30px;line-height:36px;color:#000; text-align: center;letter-spacing: -2px;}
header #ContentTitulo #Sumario {font-size: 20px;color:#666; margin-top: 5px;padding: 0 10%;}
header #ContentTitulo #Sumario mark{background: #eee;}


#First{display: block;}
#Second{display: none;margin-top: -20px;}

#First .Fuente{color:#aaa;font-size: 11px;text-align: center;margin:10px 0 0;}

#Termometro{height:26px;margin-bottom: 70px;padding: 0;position: relative;}
#Termometro::before{content: '270 VOTOS PARA GANAR';display:block;color:#555;text-align: center;font-weight: 400;font-size:10px;width: 100%;top: -44px;padding-bottom: 56px;background: url(../img/dotted_border.png) no-repeat center bottom;position: absolute;z-index: 10;}
#Actualizacion{font-size: 12px;font-weight:400;color:#333;top: -17px;position: relative;}
#Actualizacion a{margin-left: 10px;background: #ffe501;color:#333;padding: 5px 10px;border-radius: 10px;text-decoration: none;}
#Actualizacion a:hover{background: #ffde01;box-shadow: 0 0 10px #e5e5e5;}
#Termometro #BarraGris{background: #eee;height:26px;margin-top: -33px;position: relative;z-index: -1;}
#Termometro .TotalVotos{font-size: 42px;position: absolute;top:-50px;    font-family: 'Rubik Mono One';letter-spacing: -5px;}
#Termometro .Nombre{font-size:13px;text-transform:uppercase;position: absolute;bottom:-20px;font-weight: 700;}
#Termometro .Barra{
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;}
#Termometro .Aventaja{opacity:0.35;}
#Termometro #BidenFace{margin-top: -60px;text-align: center;padding: 0;}
/*#Termometro #BidenFace img{height: 150px;display: inline-block;}*/
#Termometro #BidenFace img{height: 140px;display: inline-block;}
#Termometro #Biden{padding:0;width: 83.33333333%;}
#Termometro #Biden .Barra{background: #1a4df1;width:73.7%;height:26px;float: left;}
#Termometro #Biden .TotalVotos{color:#1a4df1;}
#Termometro #Biden .Nombre{color:#1a4df1;}
#Termometro #Trump{text-align: right;padding:0;width: 83.33333333%;top: -26px;z-index: 2;}
#Termometro #TrumpFace{margin-top: -90px;text-align: right;padding: 0;}
#Termometro #TrumpFace img{height: 140px;display: inline-block;}
#Termometro #Trump .Barra{background: #ec0000;width:60.74%;height:26px;float: right;}
#Termometro #Trump .TotalVotos{color:#ec0000;right: 0;}
#Termometro #Trump .Nombre{color:#ec0000;right: 0;}


#MobileFaces #TrumpFace, #MobileFaces #BidenFace{padding:0;}
.Nomenclatura{position: absolute;bottom: -42px;font-size: 9px;}
.Nomenclatura span{padding: 2px 5px 2px;margin-right: 3px;display: inline-block;}
#Termometro #Biden .Nomenclatura span.Ganado{background: #1a4df1;color: #fff;}
#Termometro #Biden .Nomenclatura span.Lidera{background: rgba(26,77,241,0.3);}
#Termometro #Trump .Nomenclatura span.Ganado{background: #ec0000;color: #fff;}
#Termometro #Trump .Nomenclatura span.Lidera{background: rgba(236,0,0,0.3);}
#Termometro #Trump .Nomenclatura{right:0;}
#Termometro #Trump .Nomenclatura span{margin: 0 0 0 3px;}

.ui-loader.ui-corner-all{display: none;}
  


@media screen and (min-width: 1008px){
    .container {max-width: 960px;width: 960px;padding: 0;}
}

@media screen and (min-width: 1200px){
    .container {max-width: 1152px;width: 1152px;padding: 0;}
}

@media screen and (min-width: 1441px){
    .container {max-width: 1344px;width: 1344px;padding: 0;}
}

@media screen and (max-width: 1007px){
    .container {width: 100%;padding:0 18px;}
}



@media (max-width: 991px) {
    nav ul li.LittleHelp{display: block;float: none;margin: 0 0 25px;padding: 0;}
    #Termometro::before{top:126px;}
    #Actualizacion{top:80px;}
    header{margin-bottom: 20px;}
    header #ContentTitulo{margin:0;}
    header #Logo {display: inline-block;width: 650px;}
    #MobileFaces #TrumpFace{text-align: right;}
    #MobileFaces #TrumpFace img, #MobileFaces #BidenFace img{height: 130px;}
    #MobileFaces {padding: 0 0 40px;}
    #Termometro #Biden{width: 100%;}
    #Termometro #Trump{width: 100%;}
    #Actualizacion a {padding: 11px 20px;border-radius: 25px;}
    #First .Fuente{margin: 30px 0 0;}
}

@media (max-width: 767px) {
    header #ContentTitulo h1{font-size: 33px;line-height: 28px;letter-spacing: -2px;}
    header #ContentTitulo #Sumario{font-size: 15px;padding: 0;}
    header .col-xs-12{padding: 0;}
    header #Logo{margin:0 auto;width:85%;max-width: 240px;float: none;}
    #Termometro{margin-bottom: 50px;}
    #Termometro::before{top: 78px;font-size: 9px;}
    #Termometro .TotalVotos{font-size: 26px;letter-spacing: -2px;top: -32px;}
    #Termometro .Nombre{font-size: 11px;bottom: -20px;}
    nav ul li#BorrarPref{border: none;}
    nav ul li.LittleHelp img{display: block;margin: 0 auto;}
    .EstadosContent h2{font-size: 24px;}
    .EstadosContent .Estado{margin: 0 10px 35px 0;width: 70px;background: #fff;background-size: 1px 40px;}
    .EstadosContent .Estado span{width: 35px;color: inherit;display: block;opacity: 0.1;}
    .EstadosContent .Estado:hover .NumeroVotos{top:initial;font-size: initial;font-weight: initial;}
    .EstadosContent .Estado.Democrata span{display: none;}
    .EstadosContent .Estado.DemocrataPosible span{display: none;}
    .EstadosContent .Estado.DemocrataProbable span{display: none;}
    .EstadosContent .Estado.Republicano span{display: none;}
    .EstadosContent .Estado.RepublicanoPosible span{display: none;}
    .EstadosContent .Estado.RepublicanoProbable span{display: none;}
    #Actualizacion{top:70px;}
    #MobileFaces{padding: 0 0 30px;}
    #MobileFaces #TrumpFace img, #MobileFaces #BidenFace img{height: 90px;display: inline-block;}
}





