@font-face {
    font-family: Helvetica;
    src: url('fonts/HelveticaNeue.ttf');
}
@font-face {
    font-family: HelveticaBold;
    src: url('fonts/HelveticaNeueBold.ttf');
}
@font-face {
    font-family: HelveticaLight;
    src: url('fonts/HelveticaNeueLight.ttf');
}
@font-face {
    font-family: Futura;
    src: url('fonts/Futura.ttf');
}
.transition {
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.boxShadow {
    box-shadow: 0 0 0.6em 0.1em #464646;
}
#main-article {
    position: relative;
    width: 100%;
    padding-bottom: 2em;
}
#main-article img {
    width: 100%;
    display: block;
}
#hero {
    margin: 2em 10%;
}
.main-article-caption {
    position: absolute;
    left: 1.5em;
    top: 19%;
    width: 45%;
}
.main-article-caption h1 {
    text-transform: uppercase;
    color: #FFF;
    line-height: .85em;
    font-size: 1.5em;
    width: 60%;
}
.main-article-caption span {
    color: #d2d6d4;
    font-size: 1.4em;
    display: block;
    margin-top: -0.3em;
    font-family: Futura, sans-serif;
    margin-bottom: 15%;
    text-transform: uppercase;
}
#article-list-bullets {
    margin: 0;
    position: absolute;
    bottom: .4em;
    right: 0;
    font-size: .9em;
    z-index: 900;
}
#article-list-bullets li {
    display: inline-block;
    margin: 0 .3em;
    cursor: pointer;
    color: #939393;
}
#article-list-bullets li.selected {
    color: #b01116;
}
#main-article-list {
    margin: 0;
    position: relative;
}
.main-article-list-item {
    width: 100%;
    position: absolute;
    display: none;
}
.main-article-list-item:first-child {
    display: block;
}
.small-article {
    width: 30%;
    position: relative;
    float: left;
    margin-top: 2em;
    margin-bottom: 2em;
}
.small-article img {
    width: 100%;
    display: block;
}
.small-article h3 {
    text-transform: uppercase;
    font-size: 1.8em;
    position: absolute;
    left: .2em;
    bottom: .2em;
    color: #f4f4f4;
    margin-bottom: 0;
}
.small-article h3 i {
    display: none;
}
.small-article:nth-child(3) {
    margin: 2em 5% 2em;
}
#media {
    background: #FFF;
    padding: 4em 10% 4em;
    position: relative;
}
#overview {
    background: #FFF;
    padding: 3em 10% 5em;
    position: relative;
}
#left-news {
    float: left;
    width: 24%;
    margin-right: 3%;
}
#media-articles {
    width: 73%;
    float: right;
}
#left-news h2,
#overview-articles-wrapper h2 {
    color: #b01116;
    text-transform: uppercase;
    font-size: 2em;
}
#overview-articles-wrapper h2 {
    margin-bottom: .5em;
}
#left-news p {
    color: #282828;
}
#archive {
    margin: 2em 0;
}
#archive a {
    color: #b01116;
    border-top: .1em solid #d9d9d9;
    text-decoration: none;
    display: block;
    font-weight: bold;
    margin: .5em 0;
    padding-top: .5em;
}
#archive li:last-child a {
    font-weight: normal;
}
#media-articles-list {
    margin: 0;
}
#media-articles-list li {
    width: 30%;
    float: left;
}
#media-articles-list li img {
    display: block;
    width: 100%;
    margin-bottom: .3em;
}
#media-articles-list h3 {
    color: #b01116;
    font-size: 1.2em;
    text-transform: uppercase;
    margin: .5em 0;
}
#media-articles-list li:nth-child(2) {
    margin: 0 5%;
}
.break-line {
    width: 80%;
    left: 10%;
    bottom: 0;
    position: absolute;
    height: .13em;
    background: #efcfd0;
}
#overview h3 {
    font-size: 1.3em;
    text-transform: uppercase;
    color: #282828;
}
#wide-article h2,
#overview-articles h2 {
    font-family: Helvetica, sans-serif;
    color: #282828;
    font-size: 1.8em;
    text-transform: uppercase;
    margin-bottom: .5em;
    margin-top: .3em;
}
#wide-article-content img {
    width: 25%;
    margin-right: 2%;
    float: left;
}
#wide-article-content div {
    width: 73%;
    float: left;
}
#overview-articles-wrapper {
    padding: 4em 10% 2em;
    background: #FFF;
}
#overview-articles {
    margin: 0;
}
#overview-articles li {
    float: left;
    width: 47%;
    margin-bottom: 2em;
}
#overview-articles li:nth-child(2n) {
    margin-left: 6%;
}
#overview-articles img {
    float: left;
    width: 30%;
    margin-right: 2%;
}
#overview-articles div {
    width: 64%;
    float: left;
    margin-top: 1em;
    margin-left: 4%;
}
#overview-articles h2 {
    margin: 0 0 .2em;
}
#resp-blog-see-all {
    display: none;
    color: #b01116;
    text-decoration: none;
}
@media screen and (max-width: 600px) {
    #hero {
        margin: 1em 0 0;
    }
    .main-article-caption {
        width: 94% !important;
        left: 0 !important;
        margin: 0 3% 0;
        bottom: 0;
        top: auto !important;
        height: auto;
    }
    .main-article-caption span {
        display: none !important;
    }
    .main-article-caption h1 {
        font-size: 2em;
    }
    #main-article {
        width: 96%;
        margin: 0 2% 2%;
    }
    .small-article {
        width: 100%;
        float: none;
        margin: 0;
    }
    .small-article:nth-child(3) {
        margin: 0;
    }
    .small-article img {
        display: none;
    }
    .small-article h3 {
        position: relative;
        color: #b01116;
        background: #d8d8d8;
        padding: .8em .4em;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid #AFAFAF;
        font-size: 1.4em;
    }
    #left-news p {
        display: none;
    }
    #archive {
        display: none;
    }
    #media-articles {
        width: 100%;
    }
    #media-articles-list li {
        width: 100%;
        margin: 0;
        display: none;
    }
    #media-articles-list li:first-child {
        display: block;
    }
    .break-line {
        background: #AFAFAF;
        display: block;
        width: 100%;
        position: relative;
        left: 0;
    }
    #resp-blog-see-all {
        display: block;
        margin: 4em 0 1.5em;
    }
    #media {
        padding: 3em 10% 0;
    }
    #wide-article-content img,
    #overview-articles img {
        width: 100%;
        margin: 0;
    }
    #wide-article-content div,
    #overview-articles div {
        width: 100%;
        margin-top: 1em;
    }
    #wide-article h2 {
        margin-top: 1em;
    }
    #overview-articles li {
        width: 100%;
    }
    #overview-articles li:nth-child(2n) {
        margin-left: 0;
    }
    .small-article h3 i {
        display: block;
        position: absolute;
        right: .6em;
        top: 31%;
    }
    #scroll-down {
        display: none;
    }
    #overview .break-line {
        bottom: -3.5em;
    }
    #media .break-line {
        bottom: -1em;
    }
    #article-list-bullets {
        left: 0;
        text-align: center;
    }
}
#scroll-down,
#scroll-up {
    position: fixed;
    right: .4em;
    bottom: .2em;
    font-size: 3em;
    color: #939393;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
#scroll-up {
    display: none;
}
#scroll-down:hover,
#scroll-up:hover {
    color: #b01116;
}
#password {
    background: #FFF;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}
#password div {
    text-align: center;
    margin-top: 3em;
}
#password h1 {
    font-size: 2em;
    width: 70%;
    margin: 1em auto .3em;
    font-family: HelveticaBold, sans-serif;
}
#password input {
    font-size: 1.1em;
    padding: .8em 1.2em;
    border-radius: .3em;
    outline: none;
    border: .1em solid #BEBEBE;
    width: 20em;
}
#password .btn {
    text-decoration: none;
    padding: 1em 1.4em;
    display: inline-block;
    border: .1em solid #d9d9d9;
    margin-top: .8em;
    border-radius: .3em;
    color: #d9d9d9;
    background: #b01116;
}
#error {
    background: #AD2A2F;
    text-align: center;
    padding: .5em .8em;
    border-radius: .3em;
    color: #EEE;
    margin: 1em auto 0;
    font-size: .8em;
    display: none;
}
p {
    font-size: .9em;
}
@media screen and (min-width: 600px) and (max-width: 1050px) {
    #hero {
        margin: 2em 2%;
    }
    #overview {
        padding: 3em 2% 5em;
    }
    #media {
        padding: 4em 2%;
    }
    #overview-articles-wrapper {
        padding: 4em 2% 2em;
    }
    footer {
        padding: 4em 3% 2em;
    }
    .main-article-caption {
        font-size: .8em;
    }
}
@media screen and (min-width: 1050px) and (max-width: 1313px) {
    #overview-articles li
    {
        width:41%;
    }
}