body {
    font-family: "Aileron-Light", Arial;
    font-size: 12px;
    color: #808080;
    background: #F2F2F2;
    background-size: cover;
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #ED1F24;
    -webkit-transition: all ease-out .3s;
            transition: all ease-out .3s;
}

a:hover {
    color: #000;
}

a.boton {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 15px 8px 15px;
    font-family: "ProximaNova-Bold", Arial;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 5px;
    background: #ED1F24;
}

a.boton:hover {
    color: #fff;
    background: #808080;
}

img {
    vertical-align: bottom;
}

header {
    overflow: hidden;
    padding: 20px 0 15px 0;
    text-align: center;
    background: #fff;
}

header h1,
header h2 {
    display: inline-block;
    margin: 0 10px;
    font-family: "ProximaNova-Bold", Arial;
    font-size: 30px;
    color: #ED1F24;
    vertical-align: middle;
}

header h2 {
    font-family: "ProximaNova-Semibold", Arial;
    font-size: 24px;
    color: #000;
}

header p {
    float: left;
    margin-top: -4px;
}

header section,
article,
.medios section {
    width: 750px;
    margin: 0 auto;
}

.fecha {
    overflow: hidden;
    padding: 20px 0;
}

.fecha h1,
.fecha h2 {
    font-family: "ProximaNova-Semibold", Arial;
    font-size: 24px;
    color: #000;
}

.fecha h2 {
    font-size: 16px;
    color: #828282;
}

.fecha p {
    text-align: center;
}

.fecha .left {
    float: left;
}

.fecha .right {
    float: right;
    text-align: right;
}

.fecha .dias {
    clear: both;
    overflow: hidden;
    padding: 20px 0;
    text-align: center;
}

.fecha .dia {
    width: 90px;
    height: 20px;
    display: inline-block;
    margin: 0 7px;
}

.fecha .activo {
    background: #ED1F24;
}

.fecha .inactivo {
    background: #F0D7D3;
}

.datos h1 {
    font-family: "ProximaNova-Bold", Arial;
    font-size: 55px;
    color: #000;
}

.datos h2 {
    font-family: "ProximaNova-Semibold", Arial;
    font-size: 36px;
    color: #000;
}

.datos h3,
.nota h3 {
    margin-bottom: 3px;
    font-family: "ProximaNova-Semibold", Arial;
    font-size: 16px;
}

.nota p {
    margin-bottom: 20px;
}

.datos figure {
    float: left;
    margin: 11px 15px 0 0;
}

.datos img,
.sentimiento img,
.objetivo img {
    width: 25px;
}

.alcance img {
    width: 30px;
}

.datos .renglon,
.medios .renglon {
    overflow: hidden;
    padding: 20px 0 15px 0;
    border-top: 1px solid #9B9B9B;
}

.datos .col2,
.datos .personas .col2,
.medios .col2 {
    width: 50%;
    float: left;
    padding-right: 2%;
}

.datos .col2 + .col2,
.datos .col3 + .col3,
.medios .col2 + .col2 {
    padding-left: 2%;
}

.datos .col3 {
    width: 33.33%;
    float: left;
    padding-right: 2%;
}

.datos .linea {
    border-right: 1px solid #9B9B9B;
}

.estados {
    margin-bottom: 30px;
}

.estados .renglon {
    border-top: 0;
    border-bottom: 1px solid #9B9B9B;
}

.sentimiento,
.objetivo {
    padding: 20px 0;
    border-top: 1px solid #9B9B9B;
}

.sentimiento h3,
.objetivo h3 {
    margin-bottom: 20px;
    font-family: "ProximaNova-Semibold", Arial;
    font-size: 18px;
    color: #000;
}

.sentimiento figure,
.objetivo figure {
    float: left;
    margin: -7px 10px 0 0;
}

.sentimiento .skills {
    margin-bottom: 10px;
}

.sentimiento .skillbar {
    position: relative;
    width: 100%;
    display: block;
    -webkit-transition: .3s linear;
            transition: .3s linear;
    -webkit-transition-property: width, background-color;
            transition-property: width, background-color;
    background: #E6E6E6;
}

.sentimiento .skillbar-bar {
    width: 0;
    height: 35px;
    background: #00AFED;
}

.sentimiento .skill-bar-title,
.sentimiento .skill-bar-percent {
    position: absolute;
    top: 10px;
    font-family: "ProximaNova-Bold", Arial;
    font-size: 1.25em;
}

.sentimiento .skill-bar-title {
    left: 15px;
    color: #fff;
}

.sentimiento .skill-bar-percent {
    right: 15px;
    color: #808080;
}

.universo {
    padding: 40px 0;
    line-height: 1.2;
}

.universo h1 {
    font-family: "ProximaNova-Bold", Arial;
    font-size: 24px;
    text-transform: uppercase;
    color: #000;
}

.universo h2 {
    margin-top: 20px;
    font-family: "ProximaNova-Semibold", Arial;
    font-size: 18px;
    color: #000;
}

.universo h3 {
    font-family: "ProximaNova-Regular", Arial;
    font-size: 18px;
}

.universo p {
    margin-top: 20px;
}

.universo + .universo {
    border-top: 1px solid #9B9B9B;
}

.posts {
    margin-top: 25px;
}

.posts div {
    width: 49%;
    display: inline-block;
    padding: 0 2%;
    vertical-align: top;
}

.medios {
    width: 100%;
    padding-top: 25px;
    text-align: center;
    color: #fff;
    background: #000;
}

.medios h1 {
    margin: 40px 0 20px 0;
    font-family: "ProximaNova-Bold", Arial;
    font-size: 36px;
    color: #fff;
}

.medios .boton {
    margin-right: auto;
    margin-left: auto;
}

.medios .renglon a {
    width: 80%;
    display: block;
    margin: 10px auto;
    padding: 15px 0;
    font-family: "ProximaNova-Bold", Arial;
    font-size: 18px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background: #333;
}

.medios .renglon a:hover {
    background: #ED1F24;
}

.medios .renglon {
    padding: 25px 0 20px 0;
    border-color: #333;
}

.medios img {
    width: 80%;
}


@media only screen and (max-width: 825px) {
    header section,
    article,
    .medios section {
        width: 90%;
    }
    
    .fecha .dia {
        width: 12.5%;
        margin: 0 .5%;
    }
}


@media only screen and (max-width: 725px) {
    header h1,
    header h2 {
        margin: 0 5px;
        font-size: 26px;
    }
    
    header h2 {
        font-size: 20px;
    }
    
    .datos h1 {
        font-size: 40px;
    }

    .datos h2 {
        font-size: 30px;
    }
    
    .datos figure {
        margin: 5px 10px 0 0;
    }
}


@media only screen and (max-width: 550px) {
    header h1,
    header h2 {
        display: block;
        margin: 0;
        font-size: 20px;
    }
    
    header h2 {
        font-size: 15px;
    }
    
    header a.boton {
        font-size: 14px;
    }
    
    header div {
        float: right;
        text-align: right;
        margin-top: -6px;
    }
    
    .datos h1 {
        font-size: 45px;
    }

    .datos h2 {
        font-size: 24px;
    }
    
    .datos h3 {
        font-size: 14px;
    }
    
    .datos .col2 {
        width: 100%;
        float: none;
        padding-right: 0;
    }
    
    .datos .col2 + .col2 {
        margin-top: 5px;
        padding-left: 0;
    }
    
    .datos .personas .col2 + .col2 {
        margin-top: 0;
        padding-left: 3%;
    }
    
    .estados h2 {
        font-size: 22px;
    }
    
    .universo {
        padding: 30px 0;
    }

    .universo h1 {
        font-size: 20px;
    }

    .universo h2 {
        margin-top: 15px;
        font-size: 16px;
    }

    .universo h3 {
        font-size: 16px;
    }
    
    .posts div {
        width: 100%;
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }
    
    .medios .col2 {
        width: 100%;
        float: none;
    }
    
    .medios img {
        width: 80%;
    }
    
    .medios .renglon {
        padding-top: 5px;
    }
    
    .medios .renglon a {
        padding: 10px 0;
    }
    
    .medios h1 {
        margin-top: 30px;
        font-size: 30px;
    }
}


@media only screen and (max-width: 450px) {
    header a.boton {
        margin-right: 5px;
        padding: 8px 10px 6px 10px;
        font-size: 12px;
    }
    
    .datos .renglon {
        padding: 15px 0 10px 0;
    }
    
    .estados h1 {
        font-size: 30px;
    }
    
    .estados h2 {
        font-size: 20px;
    }
    
    .sentimiento,
    .objetivo {
        padding: 15px 0;
    }
    
    .sentimiento h3,
    .objetivo h3 {
        margin-bottom: 10px;
    }
    
    .datos .col3 figure {
        float: none;
        margin: 0 0 5px 0;
    }
}


@media only screen and (max-width: 400px) {
    header {
        padding: 7px 0 10px 0;
    }
    
    header h1 {
        font-size: 18px;
    }
    
    header h2 {
        font-size: 13px;
    }

    header p {
        margin-top: 5px;
    }
    
    header div {
        float: right;
        margin-top: 4px;
        text-align: right;
    }
    
    .fecha,
    .fecha .dias {
        padding: 15px 0;
    }
    
    .fecha h1 {
        font-size: 20px;
    }

    .fecha h2 {
        font-size: 14px;
    }
    
    .fecha .dia {
        height: 10px;
    }
    
    .datos .col3 h2 {
        font-size: 20px;
    }
    
    .datos .col3 h3 {
        font-size: 12px;
    }
    
    .datos .col3 h3 + h3 {
        padding-left: 4%;
    }
    
    .universo {
        padding: 20px 0;
    }
    
    .universo h1 {
        font-size: 16px;
    }

    .universo h2 {
        margin-top: 10px;
        font-size: 14px;
    }

    .universo h3 {
        font-size: 12px;
    }
    
    .universo p {
        margin-top: 10px;
        font-size: 10px;
    }
}

.acceso header,
.acceso article {
    padding: 25px 0;
}

.acceso header img {
    width: 150px;
}

.acceso article {
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
}

.acceso input[type="text"],
.acceso input[type="password"],
.acceso input[type="submit"] {
    width: 400px;
    height: 30px;
    display: block;
    margin: 0 auto 10px auto;
    padding: 5px 10px;
    font-size: 12px;
    outline: none;
    border: 1px solid #9B9B9B;
    border-radius: 0;
    -webkit-appearance: none;
            appearance: none;
}

.acceso input[type="submit"] {
    height: 32px;
    margin-top: 20px;
    font-family: "ProximaNova-Bold", Arial;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    border: 0;
    -webkit-transition: all ease-out .3s;
            transition: all ease-out .3s;
    background: #ED1F24;
}

.acceso input[type="submit"]:hover {
    color: #fff;
    background: #808080;
}