html, body {
    box-sizing: border-box;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
    }
@font-face {
    font-family: "ChronicleDisplay-Bold";
    src: url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/ChronicleDisplay-Bold.eot?#iefix) format("embedded-opentype"), url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/ChronicleDisplay-Bold.otf) format("opentype"), url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/ChronicleDisplay-Bold.woff) format("woff"), url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/ChronicleDisplay-Bold.ttf) format("truetype"), url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/ChronicleDisplay-Bold.svg#ChronicleDisplay-Bold) format("svg")
    }
@font-face {
    font-family: "actobold";
    src: url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/acto-bold-webfont.woff2) format("woff2"), url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/acto-bold-webfont.woff) format("woff")
    }
@font-face {
    font-family: "actobook";
    src: url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/acto-book-webfont.woff2) format("woff2"), url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/fonts/acto-book-webfont.woff) format("woff")
    }
.clear {
    clear: both
    }
#header {
    margin-bottom: 50px;
    width: 100%
    }
.header-comercio {
    background: #000;
    padding: 5px 0;
    position: relative;
    z-index: 9999999
    }
.ctn-header-comercio {
    margin: 0 auto;
    max-width: 1024px;
    padding: 0 5px
    }
.ctn-header-comercio a {
    display: inline-block;
    text-indent: -9999px
    }
a.logo-comercio {
    background: url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/img/logo-comercio.png) no-repeat 0 0;
    background-size: 100%;
    height: 30px;
    margin-top: 10px;
    width: 110px
    }
#social {
    float: right
    }
#social ul {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    vertical-align: middle
    }
#social ul li {
    display: inline-block;
    margin: 0 3px;
    vertical-align: middle
    }
#social ul li a {
    display: block;
    height: 36px;
    text-indent: -9999px;
    width: 36px
    }
#social ul li a.facebook {
    background: url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/img/sprite-redes.png) no-repeat 0 0;
    background-size: 100px
    }
#social ul li a.tw {
    background: url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/img/sprite-redes.png) no-repeat -32px 0;
    background-size: 100px
    }
#social ul li a.wst {
    background: url(https://d1ts5g4ys243sh.cloudfront.net/proyectos_especiales_prod/especiales/claves-referendum/img/sprite-redes.png) no-repeat -63px 0;
    background-size: 100px
    }
a.logo-comercio-especiales {
    text-indent: inherit
    }
a.logo-comercio-especiales img {
    vertical-align: top
    }
#contenedor {
    margin: 0 auto;
    max-width: 1004px;
    padding: 0 10px
    }
#contenedor h1 {
    font: 2em/1.2 "actobold";
    margin: 20px auto 10px;
    text-align: center
    }
#contenedor h5 {
    font: 1.3em/1.2 "ChronicleDisplay-Bold";
    margin-bottom: 40px;
    text-align: center
    }
#contenedor h6 {
    font: 1.1em/1.2 "actobook";
    margin: 0 auto;
    text-align: center
    }
.bloque {
    margin: 0 auto 80px;
    text-align: center
    }
.box-opinion {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 0 0 10px #d4d4d4;
    display: inline-block;
    margin: 0 8px 20px;
    vertical-align: top;
    width: 314px
    }
.box-opinion span {
    color: #fff;
    display: block;
    font: 16px/19px "actobold";
    padding: 3px 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%
    }
.verde {
    background: #16be1e
    }
.ambar {
    background: #ffbe00
    }
.rojo {
    background: #be1626
    }
.box-texto {
    padding: 10px 5px;
    text-align: left
    }
.box-autor {
    margin-bottom: 20px;
    width: 100%
    }
.box-autor img {
    display: inline-block;
    max-width: 54px;
    vertical-align: top
    }
.box-datos-autor {
    display: inline-block;
    max-width: 245px;
    vertical-align: bottom
    }
.box-autor h3 {
    display: block;
    font: 16px/19px "actobold";
    margin: 0 auto;
    vertical-align: top
    }
.box-autor h4 {
    display: inline-block;
    font: 15px/19px "actobook";
    margin: 0 auto;
    vertical-align: top
    }
.box-texto p {
    font: 1em/1.5 "actobook";
    margin: 0 5px
    }
/** swiper **/
.swiper-container {
    width: 100%;
    height: 100%
    }
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
    }
.movil.swiper-container, #social.footer {
    display: none
    }
@media only screen and (max-width: 640px) {
    .last {
        margin-bottom: 10px
        }
    .desktop {
        display: none
        }
    .movil.swiper-container {
        display: block
        }
    .movil.swiper-container .swiper-button-next, .movil.swiper-container .swiper-button-prev {
        background-size: 10px 45px;
        height: 20px;
        width: 20px
        }
    .movil .box-opinion {
        margin-top: 30px;
        text-align: left
        }
    #social.footer {
        display: block;
        float: inherit;
        margin: 20px auto;
        text-align: center
        }
    #social.footer ul li {
        margin: 0 10px
        }
    #social.footer ul li a.facebook {
        background-position-x: 2px
        }
    #social.footer ul li a.wst {
        background-position-x: -65px
        }
    }