html {
  position: relative;
  min-height: 100%;
}
body{	
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/** fonts **/

@font-face {
    font-family: 'actothin';
    src: url('/especiales/congresistas-electos/fonts/acto-thin-webfont.eot');
    src: url('/especiales/congresistas-electos/fonts/acto-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/especiales/congresistas-electos/fonts/acto-thin-webfont.woff2') format('woff2'),
         url('/especiales/congresistas-electos/fonts/acto-thin-webfont.woff') format('woff'),
         url('/especiales/congresistas-electos/fonts/acto-thin-webfont.ttf') format('truetype'),
         url('/especiales/congresistas-electos/fonts/acto-thin-webfont.svg#actothin') format('svg');
}

@font-face {
    font-family: 'actobook';
    src: url('/especiales/congresistas-electos/fonts/acto-book-webfont.eot');
    src: url('/especiales/congresistas-electos/fonts/acto-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/especiales/congresistas-electos/fonts/acto-book-webfont.woff2') format('woff2'),
         url('/especiales/congresistas-electos/fonts/acto-book-webfont.woff') format('woff'),
         url('/especiales/congresistas-electos/fonts/acto-book-webfont.ttf') format('truetype'),
         url('/especiales/congresistas-electos/fonts/acto-book-webfont.svg#actobook') format('svg');
}

@font-face {
    font-family: 'actobold';
    src: url('/especiales/congresistas-electos/fonts/acto-bold-webfont.eot');
    src: url('/especiales/congresistas-electos/fonts/acto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/especiales/congresistas-electos/fonts/acto-bold-webfont.woff2') format('woff2'),
         url('/especiales/congresistas-electos/fonts/acto-bold-webfont.woff') format('woff'),
         url('/especiales/congresistas-electos/fonts/acto-bold-webfont.ttf') format('truetype'),
         url('/especiales/congresistas-electos/fonts/acto-bold-webfont.svg#actobold') format('svg');
}

@font-face {
    font-family: 'prelobook';
    src: url('/especiales/congresistas-electos/fonts/Prelo-Book-webfont.eot');
    src: url('/especiales/congresistas-electos/fonts/Prelo-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/especiales/congresistas-electos/fonts/Prelo-Book-webfont.woff2') format('woff2'),
         url('/especiales/congresistas-electos/fonts/Prelo-Book-webfont.woff') format('woff'),
         url('/especiales/congresistas-electos/fonts/Prelo-Book-webfont.ttf') format('truetype'),
         url('/especiales/congresistas-electos/fonts/Prelo-Book-webfont.svg#prelobook') format('svg');
}

@font-face {
    font-family: 'prelosemibold';
    src: url('/especiales/congresistas-electos/fonts/Prelo-SemiBold-webfont.eot');
    src: url('/especiales/congresistas-electos/fonts/Prelo-SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/especiales/congresistas-electos/fonts/Prelo-SemiBold-webfont.woff2') format('woff2'),
         url('/especiales/congresistas-electos/fonts/Prelo-SemiBold-webfont.woff') format('woff'),
         url('/especiales/congresistas-electos/fonts/Prelo-SemiBold-webfont.ttf') format('truetype'),
         url('/especiales/congresistas-electos/fonts/Prelo-SemiBold-webfont.svg#prelosemibold') format('svg');
}

@font-face {
    font-family: 'prelobold';
    src: url('/especiales/congresistas-electos/fonts/Prelo-Bold-webfont.eot');
    src: url('/especiales/congresistas-electos/fonts/Prelo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/especiales/congresistas-electos/fonts/Prelo-Bold-webfont.woff2') format('woff2'),
         url('/especiales/congresistas-electos/fonts/Prelo-Bold-webfont.woff') format('woff'),
         url('/especiales/congresistas-electos/fonts/Prelo-Bold-webfont.ttf') format('truetype'),
         url('/especiales/congresistas-electos/fonts/Prelo-Bold-webfont.svg#prelobold') format('svg');
}

.header{
    box-sizing: border-box;
    margin: 0 auto;
}
    .header-comercio{
        background: #000;
        padding: 10px 0;
    }
        .header-comercio a{
            background: url(/especiales/congresistas-electos/img/logo-comercio.png) no-repeat 0 0;
            background-size: 100%; 
            display: block;
            height: 22px;
            margin: 0 auto;
            text-indent: -9999px;
            width: 135px;
        }
    .box-header-gris{
        background: #0a0a0a; /* Old browsers */
        background: -moz-linear-gradient(left,  #0a0a0a 0%, #333333 50%, #0a0a0a 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  #0a0a0a 0%,#333333 50%,#0a0a0a 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  #0a0a0a 0%,#333333 50%,#0a0a0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0a0a', endColorstr='#0a0a0a',GradientType=1 ); /* IE6-9 */
    }
        .box-titulo{
            display: inline-block;
            margin: 10px auto 0;
            vertical-align: top;
            text-align: center;
            width: 100%;
        }
            .box-titulo h2{
                color: #ffc928;
                font: 27px/30px 'actobold';
                margin: 10px auto;
                text-transform: uppercase;
            }
                .box-titulo h2 span{
                    color: #fff;
                    font-family: 'actothin';
                }
            .box-titulo h1{
                color: #fff;
                font: 3em/1em 'actobold';    
                margin: 10px auto;            
            }
                .box-titulo h1 span{                                    
                    display: block;
                    font-size: 0.7em;    
                    line-height: 50px;
                    margin: 0 auto;
                }
        .congreso-icon{
            display: inline-block;
            vertical-align: top;
            width: 100%;
        }
    .box-redes{
        background: #ffc928;
        padding: 10px;
    }
        .box-redes p{
            display: inline-block;
            font: 18px/21px 'actobook';
            margin: 0 auto;
            text-align: center;
            vertical-align: top;
        }
            .box-redes p span{
                font-family: 'actobold';
                text-transform: uppercase;
            }
        .box-total-congresistas{
            display: inline-block;
            margin: -96px 22px 0;
            vertical-align: top;
            width: 156px;
        }
            .box-total-congresistas span{
                color: #fff;
                display: block;
                margin: 0 auto;
                text-align: center;
            }
                span.numero{
                    background: #808080;
                    border-radius: 76px;
                    font: 35px/76px 'prelobold';
                    height: 76px;
                    width: 76px;
                }
                span.txt-congresistas{
                    background: #d9ab21;
                    font: 18px/21px 'prelobold';
                    padding: 20px 10px;
                    text-transform: uppercase;
                }
        #social{
            display: inline-block;
            float: right;
            margin: 10px 20px 0 0;
            vertical-align: top;       
        }
            #social ul{
                display: inline-block;
                margin: 0 auto;
                padding: 0;
            }
                #social ul li{
                    display: inline-block;
                    vertical-align: top;
                }
                    #social ul li a{
                        display: block;
                        height: 39px;
                        margin: 0 2px;
                        text-indent: -99999px;
                        width: 40px;
                    }
                        #social ul li a#facebook{
                            background: url(/especiales/congresistas-electos/img/sprite-redes.png) no-repeat -2px -7px;
                        }
                        #social ul li a#twitter{
                            background: url(/especiales/congresistas-electos/img/sprite-redes.png) no-repeat -43px -7px;
                        }
                        #social ul li a#instagram{
                            background: url(/especiales/congresistas-electos/img/sprite-redes.png) no-repeat -84px -7px;
                        }

.box-main-congresistas{
    margin: 0 auto;
    position: relative;
}
    ul.grid{ 
        display: block; 
        list-style: none;
        padding: 0 10px;
    }
        ul.grid li { 
            display: inline-block; 
            min-height: 162px;
            margin-bottom: 10px;
            vertical-align: top;
            position: relative; 
            width: 32%;
        }
            ul.grid li a.item{
                background: #4d4d4d;
                color: #fff;
                cursor: pointer;
                display: inline-block;
                width: 100%;
                text-align: center;
                text-decoration: none;
                vertical-align: top;
            }
                ul.grid li a.item h3{
                    height: 35px;
                    font: 16px/18px 'actobold';  
                    margin: 5px auto;
                    padding: 0 10px;
                }
                ul.grid li a.item h4{
                    font: 16px/18px 'actobook';  
                    margin: 8px auto;
                    padding: 0 5px;
                }
            img.grayscale{
                /*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
                /*filter: gray; /* IE6-9 */
                /*-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
            }
                img.grayscale:hover{
                    filter: none;
                    -webkit-filter: grayscale(0%);
                }

    .popup{ 
        background: #000; 
        border: 15px solid #000;
        display: none; 
        z-index: 10;
    }
        .popup.show{ 
            display: block;
        }

        span.box-partido {
            background: #d9d9d9;
            color: #fff;
            display: inline-block;
            min-height: 176px;
            padding-top: 18px;
            vertical-align: top;
            width: 32%;
            box-sizing: border-box;
        }

        span.box-partido.fuerza-popular{
            background: #f0632a;
        }
        span.box-partido.ppk{
            background: #0ac4f2;
        }
        span.box-partido.frente-amplio{
            background: #30a34d;
        }
        span.box-partido.app{
            background: #2867ae;
        }
        span.box-partido.alianza-popular{
            background: #a0ad2e;
        }
        span.box-partido.accion-popular{
            background: #c31420;
        }
        span.box-partido p{
            font: 18px/18px 'actobold';  
            margin: 0 5px;          
            text-align: center;
            text-transform: uppercase;
        }
        .bg-partido{
            height: 58px;
            margin: 10px auto;
            width: 58px;
        }
            .bg-partido-1{
                background: url(/especiales/congresistas-electos/img/logos-partidos.png) no-repeat 0 0; 
            }
            .bg-partido-2{
                background: url(/especiales/congresistas-electos/img/logos-partidos.png) no-repeat -58px 0; 
            }
            .bg-partido-3{
                background: url(/especiales/congresistas-electos/img/logos-partidos.png) no-repeat -118px 0; 
            }
            .bg-partido-4{
                background: url(/especiales/congresistas-electos/img/logos-partidos.png) no-repeat -177px 0; 
            }
            .bg-partido-5{
                background: url(/especiales/congresistas-electos/img/logos-partidos.png) no-repeat -237px 0; 
            }
            .bg-partido-6{
                background: url(/especiales/congresistas-electos/img/logos-partidos.png) no-repeat -297px 0; 
            }
    .ctn-info{
        padding: 10px 20px;
    }
        .datos-principal{
            display: inline-block;
            /*height: 122px;*/
            vertical-align: top;
            width: 215px;
        }
            .ctn-info h3{
                color: #E6B524;
                display: inline-block;
                font: 28px/31px 'prelosemibold';
                margin:0 auto;
                max-width: 200px;
                vertical-align: top;
            }
            .ctn-info h4{
                color: #4c4c4c;
                display: inline-block;
                font: 16px/18px 'prelosemibold';
                margin: 0 5px;
                vertical-align: top;
            }
        .ctn-info p{
            color: #4c4c4c;
            font: 16px/22px 'prelobook';
        }
        .ctn-info p.lista{
            margin: 0 auto;
        }
            .ctn-info p.lista span{
                color: #ffc928;
            }
        .cerrar{
            background: url(/especiales/congresistas-electos/img/btn-cerrar.png) no-repeat 0 0; 
            cursor: pointer;
            height: 20px;
            position: absolute;
            right: 20px;
            top: 20px;
            width: 26px;
            z-index: 20;
        }
        span.txt-numero-votos{
            border-bottom: 1px dotted #4d4d4d;
            color: #fff;
            display: block;
            font: 19px/22px 'prelobold';
            margin: 20px auto 15px;
            text-transform: uppercase;
        }
        span.year{
            color: #fff;
            display: block;
            font: 19px/22px 'prelobook';
            margin: 5px auto 0;
            text-transform: uppercase;
        }
        span.votos{
            border-bottom: 1px dotted #4d4d4d;
            color: #ffc928;
            display: block;
            font: 38px/41px 'prelobold';
            padding-bottom: 5px;
        }
        span.notas-relacionadas{
            color: #E6B524;
            display: block;
            font: 16px/19px 'prelobold';
            margin: 20px auto 0;
            text-transform: uppercase;
        }
        .box-redes-congresista{
            width: 100%;
        }   
            .box-redes-congresista a,
            p.mail{
                color: #666666;
                display: inline-block;
                font: 16px/38px 'prelobold';
                margin: 0 auto;
                text-decoration: none;                
                vertical-align: top;
            }
                .box-redes-congresista a:hover{
                    color: #fff;
                }
        .box-notas img{
            width: 100%;
        }
            .destacada{
                margin: 10px auto;
                width: 100%;
            }
            .nota{                   
                display: inline-block;
                vertical-align: top;
                width: 49%;
            }
    
    .show{
        box-sizing: border-box;
        background: #000;
        border: 15px solid #000;
        top: 0;
        z-index: 50;
    }   

     /** slider **/

    .slick-slider{
        display: block !important;
        height: 140px;
        margin: 10px auto;
        width: 100%;
    }
        .slick-slide{
            margin: 0 5px;
            width: 50%;
        }
            .slick-slide img {
                display: block;
                width: 100%;
            }
    .nota{
        background: #363533;
    }
        .nota a{
            text-decoration: none;
        }
        .nota h2{
            color: #fff;
            font: 17px/ 100%'glosabold';
            height: 77px;
            margin: 0;
            padding: 5px;

            box-sizing: border-box;
        }



.banner-movil{
    background: url(/especiales/congresistas-electos/movil/img/banner-movil.jpg) no-repeat center center;
    background-size: 100%;
    height: 100px;
    margin: 5px auto;
    width: 100%;    
}

.logo-grande{
    display: block;
    margin: 0 auto;
}

span.separador{
    float: left;
    width: 90%;
    display: block;
    height: 2px;
    background: #adacac;
    margin: 10px 0;
}