/* ==========================================================================
   MAIN CSS FILE - idiomatic CSS
   ========================================================================== */
/**
 * Read this carefully because it outlines a reasonable guide for our CSS
 * Development.
 *
 *
/* GENERAL PRINCIPLES
   ========================================================================== */
/**
 * Part of being a good programmer on a successful project is realizing that
 * writing code for yourself is a bad idea. Write your code for maximum clarity
 * not for personal preference.
 *
 * Before you move css to this file use a different file to setup the coding
 * until it is tested and works. Then you can move it to this file
 *
 * All code in any file should look like a single person typed it, even when
 * more people are working in the files
 *
 * Strictly enforce the agreed-upon style in this document.
 *
 * If in doubt when deciding upon a style use existing patterns or discuss
 * with the team.
 *
/* THE USE OF WHITESPACE
   ========================================================================== */
/**
 * Only one style should exist across the entire source of your code-base.
 * Always be consistent in your use of whitespace. Use whitespace to improve
 * readability.
 *
 * Never mix spaces and tabs for indentation. Use soft indents (spaces)
 *
/* COMMENTS
   ========================================================================== */
/**
 * Well commented code is extremely important. Take time to describe components,
 * how they work, their limitations and the way they are constructed. Don't leave
 * other team members guessing as to the purpose of your code.
 *
/* FORMAT
   ========================================================================== */
/**
 * This code format must ensure that code is: easy to read; easy to clearly
 * comment; minimizes the chance of accidentally introducing errors; and results
 * in useful diffs and blames.
 *
 * Use one discrete selector per line in multiselector rulesets
 *
 * include a single space before the opening bracket of a ruleset
 *
 * Include one declaration per line in a declaration block
 *
 * Use one level of indentation for each declaration
 *
 * include a single space after the colon of a declaration
 *
 * Use uppercase complete hex values #FFFFFF not #fff or #FFF
 *
 * Use double quotes
 *
 * Where allowed avoid specifying units for zero-values
 *
 * Place the closing brace of a ruleset in the same column as the first character
 *
 * Seperate each ruleset by a blank line
 */



/* ==========================================================================
   MAIN LAYOUT STYLES
   ========================================================================== */
/**
 * Here you will find the main layout styles that are used through the website
 *
 * In this section the fonts, headings, font-stylesm list-styles, button styles
 * are added
 * 
 * INDEX
 * 
 * FONTS
 * HEADING
 * PARAGRAPH
 * LINKS
 *
 */


/* FONTS
   ========================================================================== */
/**
 * This section has all font styles used in the website
 *
 * The files are stored in /assets/fonts/ 
 * for this site we use:
 * 
 * 
 * The main font is ARIAL
 */

body {
    font-family:  Arial, sans-serif;
    color:#545454;

}
@font-face {
    font-family: 'oxfam_global_headlineregular';
    src: url('../fonts/oxfamglobalheadline-webfont.eot');
    src: url('../fonts/oxfamglobalheadline-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/oxfamglobalheadline-webfont.woff') format('woff'),
    url('../fonts/oxfamglobalheadline-webfont.ttf') format('truetype'),
    url('../fonts/oxfamglobalheadline-webfont.svg#oxfam_global_headlineregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'oxfam_tstar_probold';
    src: url('../fonts/oxfam_tstarpro-bold-webfont.eot');
    src: url('../fonts/oxfam_tstarpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/oxfam_tstarpro-bold-webfont.woff2') format('woff2'),
    url('../fonts/oxfam_tstarpro-bold-webfont.woff') format('woff'),
    url('../fonts/oxfam_tstarpro-bold-webfont.ttf') format('truetype'),
    url('../fonts/oxfam_tstarpro-bold-webfont.svg#oxfam_tstar_probold') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* HEADING
   ========================================================================== */
/**
 * This section is used for all headings in the site
 *
 * Next to the normal h1,h2,h3 etc.. classes we will also use .h1,.h2,.h3 etc.. classes
 * The usefulness of the .h* classes comes into play when the size of the typography
 * in the design does not correlate with the semantically appropriate heading levels.
 * By splitting the problem in two, we can cleanly solve for both.
 * The first bit is the element/tag. The '<h*>' takes care of semantics, accessibility and SEO.
 * The second bit is the class. The '.h*' takes care typographical hierarchy.
 * the .title class will have the main visual semantice styling for all headings.
 * If there is a custom style for a title use a good title name that tells something about
 * the function of the heading (for example title-article)
 *
 * For reference see articles about Object-Oriented CSS
 *
 * http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/
 *
 * http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
 *
 * https://groups.google.com/forum/#!topic/object-oriented-css/GE1uzU2Bu48/discussion
 *
 */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 ,.h5, .h6 {
    font-family: Arial, sans-serif;

    font-weight: lighter;
}


h1, .h1 {
    font-size: 45px;
    line-height: 68px;
}

h2, .h2 {
    font-size: 35px;
    line-height: 40px; 
}

h3, .h3 {
    font-size: 32px;
    line-height: 40px; 
}

h4, .h4 {
    font-size: 24px;
    line-height: 28px
}

h5, .h5 {
    font-size: 20px;
    line-height: 35px;
}

h6, .h6 {
    font-size: 16px;
    line-height: 18px;
}

/* PARAGRAPH 
   ========================================================================== /
* 
*  The main formattin for the paragraph overrides bootstrap
*  It has the main font used on the site
*  The fallback color 
*  the main font-size
* 
*/

p {
    font-size: 14px;
    color:#545454;
}

/* LINK 
   ========================================================================== /
*
*  The main formatting for the links overrides the bootstrap fallback and
*  involves:
*  the main fallback color for a link
*  the main fallback text-decoration for a link
*  the main fallback outline
*/

a {
    color:#61a534;
    text-decoration: none;
}

a:active, 
a:hover, 
a:focus {
    color: #0c884a;
    text-decoration: none;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
/*
*
*  Sections are parts of a website page buildup and have the main style 
*  for that part of the page
*  also the main visual style for all blocks you can find here
* .
*/

/* SECTION GENERAL STYLE
   ========================================================================== /
*/

.title-header-image-frontpage{
    background-color: #f16422;
    color: #ffffff;
    font-weight: 700;    
    margin: 300px 0 20px 0px;
    padding: 10px 20px;
    text-align: left;
    text-transform: uppercase;
    display:inline;
    float:left;
}
.title-header-image{
    background-color: #f16422;
    color: #ffffff;
    font-weight: 700;
    left: 165px;
    margin: 0 0 20px 20px;
    padding: 10px 20px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 160px;
    min-width: 200px;
}
.title-header-section{
    background-color: #f16422;
    color: #ffffff;
    font-weight: 700;
    margin: 50px 0 20px 0px;
    padding: 10px 20px;
    text-align: left;
    text-transform: uppercase;
    display:inline;
    float:left;
}
.section-news-main .title-header-section{
    text-transform: none;
    font-size:18px;
    line-height:24px;
    background-color:transparent;
    padding:10px 0;
    margin-bottom:0;
}


.title.section-title-container{
    color:#ffffff;
    background-color: #f16422;
}

.content-section-frontpage{
    padding: 20px 0;
}

/* SECTION NEWS
   ========================================================================== /
*/

.section-news-backimage{
    background-attachment: fixed;
    background-clip: border-box, border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: url("../img/001157.jpg");
    background-origin: padding-box, padding-box;
    background-position: 0 0%, center center;
    background-repeat: repeat, no-repeat;
    background-size: cover;
    height: 350px;
    margin-bottom: 50px;
    position: relative
}

.section-news-backimage .title-header-image-frontpage{
    top: 250px;
}


.section-news{
    background-color: #61a534;
}

.section-news-main{}

.section-news-content{
    color: #ffffff;
}

/* SECTION WHY
   ========================================================================== /
*/

.content-featured-frontpage{
    padding: 0 20px;
}

.section-why h2{
    color:#61a534;
    font-size: 25px;
}

.section-why-main-image{
    background: no-repeat center center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 400px;
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}


/* SECTION WHAT
   ========================================================================== /
*/

.section-what{}

.section-what-main-image{}

.section-what-content{}

.section-what-main-image{
    background: no-repeat center center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    position: relative;
}

/* SECTION HOW
   ========================================================================== /
*/

.section-how{}

.section-how-main-image{}

.section-how-content{}

.section-how-main-image{
    background: no-repeat center center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 400px;
    width: 100%;
    position: relative;
}

/* *************************************************************************** */
/*  COMPONENTS                                                                              
/* *************************************************************************** */
/*  This is the styling for the COMPONENTS
 *  all sections contain components
 * 
 * index
 * 
 * comp-intro
 * comp-services
 * 
 * 
 */


/* COMP GENERAL
   ========================================================================== /
*/

.read-more-link{
    float: right;
    margin-bottom: 10px;
}

.media>.pull-left{
    margin-left: 0px;
}

/* COMP NEWS
   ========================================================================== /
*/
/*image*/

.media-news{
    list-style: none;
    float: left;
    margin: 0 0 20px 0;
    height: 300px;
    overflow: hidden;
    position: relative;
    width: 50%;
}

.media-news-container{
    background: #ffffff;
    margin:0 10px;
    height: 100%;
}

.media-news-body{
    padding: 10px 20px;
    height: 100%;
}

.media-news-big .media-news-body{
    height: 250px;
}

.image-news-block img{
    height:auto;
    width: 100%;

}

.media-news-container .media-news-title{
    line-height: 25px;
}


.media-news .media-news-title{
    margin-bottom: 5px;
}


.media-news-big{
    background: #ffffff;
    list-style: none;
    position: relative;
    margin-bottom: 50px;
}

.media-body-big{}

.media-news-content-date{
    color: #888888;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 4px;    
}

.read-more-news-link{
    position: absolute;
    right: 15px;
    bottom: 5px;
}

.section-more-news-link a{
    color:#ffffff;    
    float: right;
    font-size: 20px;
    padding: 10px;
}

.section-more-news-link a:hover{
    color: #0c884a;
}

/* COMP OVERVIEW
   ========================================================================== /
*/

.media-overview{
    list-style: none;
/*    border-bottom: 1px solid #61a534;*/
}

.media-body{
}

.media:first-child{
    /*    margin-top: 20px;*/
}

.content-page-overview{
    padding-bottom: 20px;
    /* min-height: 450px; */
}

.title-overview{
    color:#61a534;
    margin: 0;
}

/* COMP TEAM
   ========================================================================== /
*/

.contact-member-link,
.phone-content{
    color: #61a534;
    margin-bottom: 10px;
}

.function-content{
    margin-bottom: 10px;
    font-style: italic;
}


/* ==========================================================================
   HEADER
   ========================================================================== *
*
*  These are the Visual Styles used in the header
* 
*/
.header-image {
    float:left;
    position:relative;
}

.header-image img{
    height:auto;
    width: 100%;
}

.site-header{
    background-color: #61a534;
    float:left;
    width:100%;
    padding:30px 0;
}

.comp-branding{
    padding: 0;
    margin: 0;
}

.comp-branding a{
    color:#ffffff;
}

.comp-branding-company{
    color:#ffffff;
    line-height: 20px;
    font-family: 'oxfam_tstar_probold';
    text-transform:uppercase;
}



@media (max-width:1100px ) {
    .title-header-image {  
        left: 45px;
        top: 80px;
    }
}

/* *************************************************************************** */
/*  HOME PAGE                                                                              
/* *************************************************************************** */
/*  This is the styling for the main-homepage
 *  all sections are separated into sub-sections in this css
 * 
 * index
 * 
 * comp-intro
 * comp-services
 * 
 * 
 */

/* *************************************************************************** */
/*  OVERVIEW PAGE                                                                    
/* *************************************************************************** */
/*  This is the styling for the overview page */

.media-new-image-overview{
    width: 200px;
    height:200px;
    float: left;
    margin-right: 20px;
}

/* *************************************************************************** */
/*  DETAIL PAGE                                                                          
/* *************************************************************************** */
/*  This is the styling for the detail page */


.share_links li {
    border: 1px solid #608900;
    float: left;
    margin: 0 10px 10px 0;
    padding: 2px 5px;
    width: auto;
}

.title-detail{
    color:#61a534;
    margin: 0;
    /*    background-color: #f16422;
        color: #ffffff;
        font-weight: 700;
        left: 165px;
        margin: 0 0 20px 60px;
        padding: 10px 0;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        top: 160px;
        width: 200px;*/
}

/* *************************************************************************** */
/*  FOOTER                                                                                 
/* *************************************************************************** */
/*  This is the styling for the footer */
.footer-branding{
    float: right;
    margin:40px 0 30px;
}

.footer-branding img{
    float: right;
    height: auto;
    width: 110px;

}
.footer-branding a:hover {
    text-decoration:underline;
}

.footer-title{
    color: #61a534;
    line-height: 15px;
    text-align: center;
}

.site-footer{
    border-top: 5px solid  #61a534;
/*    margin-top: 20px;*/
}
.page-content {
    margin-left:135px;
    min-height:400px;
}
.big-white a {
    color:#FFFFFF;
    text-decoration:underline;
}
.page-aboutus .shareaholic-share-buttons-container  {
    display:none!important;
}