@charset "utf-8";


/***************** Articles ******************/

#pageHeader h1 {
    font-size: 1.4em;
    color: #776767;
    margin: 0 0 0.25em 0;
}


.articleBreadcrumLeft{
    text-align:left;
}

.articleBreadcrumRight{
    text-align:right;
    padding-right: 1em;
}

.articleBreadcrumRight a{
    display: block;
    text-align: right;
    color: #000;
    font-size: 0.5em;
}

.articleIndexContainer,
.articleContainer,
.articleIndexBox,
.articleIndexTitle,
.articleIndexDescription,
.collImageBox,
.articlesTitle,
.articlesDescription,
.articleBreadcrumLeft,
.articleBreadcrumRight{
    display: block;
}

.articlesTitle,
.articlesDescription,
.articleArtTitle,
.articleArtDescription,
h2,
h3,
p{
    color: #5B5050;
    width: 90%;
}

.articleIndexDescription,
.articleIndexTitle{
    width: 90%;
}

.articleIndexContainer,
.articleContainer {
    margin: 0 auto;
    position: relative;
    width: 75%;
}


/* Articles Index */

.ff-left .articleIndexTitle {
    font-size: 1em;
}

.ff-left .articleIndexDescription{
    font-size: 0.8em;
}

.articleIndexTitle{
    font-size: 1.6em;
    color: #2D2727;
    font-weight: bold;
    padding-bottom: 5px;
}

.articleIndexTitle a {
    color: #2D2727;
}

.articleIndexDescription{
    font-size: 1em;
    font-style: italic;
    color: #5B5050;
    padding: 0 0 10px;
}

.articleIndexBox {
    width: 80%;
}

.articleIndexBox img {
    display: block;
    margin: 0 20px 20px 0;
    float: left;
    width: 20%;
    height: 20%;
}

.articleThumb {
    display: block;
    float: left;
    height: 125px;
    width: 125px;
    overflow: hidden;
    background-position: center;
    margin: 0 10px 20px 0;
}

/* Articles Page */

.ff-left .articlesDescription{
    font-size: 0.9em;
}

.ff-left .articleContent p {
    font-size: 0.8em;
}

.articlesDescription{
    font-style: normal;
    color: #5B5050;
    font-size: 1em;
    margin-top: -5px;
}

.ff-left .articlesTitle{
    font-size: 1.2em;
}

.articlesTitle {
    color: #5B5050;
    font-weight: bold;
    font-size: 1.4375em;
}

.articleContent p{
    color: #5B5050;
    font-size: 1em;
    line-height: 1.5em;
}

.articleContent img{
    display: block;
    margin: 0 auto;
}

.articleArtTitle{
    text-transform: uppercase;
    font-size: 0.875em;
    padding-bottom: 5px;
}

.articleArtDescription{
    font-size: 0.875em;
}

.articleImageContainer {
    margin: 0 7px 14px;
    padding: 10px;
    width: 31%;
    float: left;
}


/** Responsive **/

@media (max-width: 995px){
    .articleContainer{
        width: 85%;
    }
    .articleBreadcrumb{
        font-size: 1em;
    }
    .articlesTitle{
        width: 100%;
    }
    img{max-width:100%;}
}


@media (max-width: 764px){
    .articleBreadcrumb{
        padding-bottom: 50px;
    }
}


/*Mobile*/

@media (max-width: 625px){

    .articleIndexBox {
        width: 100%;
    }

    .articleThumb{
        float: none;
        margin: 0 auto;
        width: 150px;
        height: 150px;
    }

    .articleIndexTitle{
        margin: 0 auto;
        text-align: center;
        padding-bottom: 0px;
    }

    .articleIndexDescription{
        margin: 0 auto;
        text-align: center;
        padding: 0 0 20px;
    }
}



@media (max-width: 420px){
    .articleBreadcrumLeft,
    .articleBreadcrumRight,
    .articleBreadcrumRight a{
        float: none;
        width: 100%;
        text-align: center;
    }

    .articleBreadcrumb {
        padding-bottom: 10px;
    }

}