/**********************************************/
/* CSS Definitions MAIN  */
/**********************************************/

/**********************************************/
/* Color definitions

light blue: #00AEEF; (heading bar, button)
dark blue: #0D669A; (menu, overlay, footer top)

light orange: #F9B21C; (heading, bar)
dark orange: #E99717; (only banner bar)

grey: #4A4A4A; (sub-heading, paragraph)
footer blue: #005E92; (only footer)

Font: 
Hammersmith One (heading, buttons, menu)
Roboto (paragraph)

*/


/* ********************************************************************** */
/* WEBFONT  */
/* ********************************************************************** */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Hammersmith+One');


/* ********************************************************************** */
/* General container 
/* ********************************************************************** */
.full_width_container{width:100%; text-align:center;}
.centered_container{width:1170px; margin:0 auto; text-align:left; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px;}
.centered_container.no_padding{ padding: 0;}
.centered_container .centered_container{width:auto;}



/* ********************************************************************** */
/* Header
/* ********************************************************************** */
#page_header{ position: relative; width:100%; background-image: url(../images/banner_nijmegen_new.jpg); background-size: cover; background-position: center; min-height: 754px; background-repeat: no-repeat; }
//#page_header #banner_overlay { background-color: #074684 ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1;}
#page_header #banner_image_text { position: relative;}
#page_header #banner_image_text img{ margin-top:50px;     padding-bottom: 10px; }
#page_header #banner_line{ width: 248px; height: 3px; background: #E99717; float: right; position: relative; margin-top: -50px;}
#page_header #banner_button_frame { margin-top: 230px; position: absolute; z-index: 1;}
#page_header #banner_button_box .banner_button_past_conf { float:left;}
#page_header #banner_button_box .banner_button { float:right;}
#page_header #banner_button_box .banner_button_link{ font-family: 'Hammersmith One', sans-serif; font-size: 26px; position: relative; color:white; padding: 15px; border: 5px solid white; border-radius:10px; margin-left:20px;}
#page_header #banner_button_box .banner_button_link:hover{ color:white; border-color: #F9B21C; text-decoration: none;}

/**********************************************/
/* Logo
/**********************************************/
#navigation_box_frame #ecoprocura_logo_box {  position: relative; float: left; height: 75px;}
#navigation_box_frame #ecoprocura_logo_box img { position: absolute; top: 0; left: 0;}
#navigation_box_frame #ecoprocura_logo_box img.sticky_logo { opacity: 0;}
#navigation_box_frame.affix-top #ecoprocura_logo_box img.sticky_logo { display:none;}
#navigation_box_frame.affix #ecoprocura_logo_box img{ width:160px; height:auto;}
#navigation_box_frame.affix #ecoprocura_logo_box img.sticky_logo { transition: opacity 0.2s ease; opacity: 1; display: block;position: relative; width: 165px;}
#navigation_box_frame.affix #ecoprocura_logo_box img.non_sticky_logo {display:none;}


/**********************************************/
/* Navigation toggle button
/**********************************************/
#navigation_toggle_box{display:none;}
#navigation_toggle_box .navigation_toggle{}
#navigation_toggle_box .navigation_toggle i{}
#navigation_toggle_box .navigation_toggle:link, .navigation_toggle:visited, .navigation_toggle:hover{}


/**********************************************/
/* Social Media buttons
/**********************************************/
#navigation_box_frame #social_media_button_box .social_media_button:hover{ background-color:#089bd9; color:white; text-decoration: none; }
#navigation_box_frame #social_media_button_box .social_media_button{ float: right; display:block;width: 26px; height: 26px; font-size: 20px;  margin: 20px 0px 5px 5px; text-decoration:none; text-align:center;transition:font-size 0.2s, padding 0.2s;}
#navigation_box_frame #social_media_button_box .social_media_button i{ color:white;}
#navigation_box_frame #social_media_button_box #twitter{ background-color:transparent;}
#navigation_box_frame #social_media_button_box #twitter:hover{ background-color:transparent;}
#navigation_box_frame.affix-top #social_media_button_box{ float: right; margin-right: 15px;}
#navigation_box_frame.affix #social_media_button_box{ float: right;  margin-top: 15px;}
#navigation_box_frame.affix #social_media_button_box .social_media_button{ width: 20px; height: 20px; font-size: 14px;}  
/*logo for subpages only diplay for sticky*/
#social_media_button_box_subpage{display:none;}
#navigation_box_frame.affix #social_media_button_box_subpage { display: block; float: right; margin-top: 15px;}


/**********************************************/
/* Flickr
/**********************************************/
.flickr-album {/*margin-left:150px; margin-right:150px;*/}

/* ********************************************************************** */
/* Navigation Box
/**********************************************/
#navigation_box_frame{/*background-color:white; border:1px solid rgb(245,245,245); border-width:1px 0 1px 0;*/ margin-bottom: 35px; padding-top: 15px;}
#navigation_box_frame * {transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease;}
#navigation_box_frame #logo_navigation_box{position:relative; }
#navigation_box_frame #logo_navigation_box #main_navigation_box { display:block; text-align:center; position:static;  margin-top: 8px; }
#navigation_box_frame.affix #logo_navigation_box #main_navigation_box{ float:left;margin-top: 0px;}
#navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation { position:static; display:inline-block; margin:0 auto; margin-left: 50px;}

/**********************************************/
/* Sticky / Affix
/**********************************************/
#navigation_box_frame.affix{ position:fixed; top:0; width:100%; z-index:10; background-color: white; min-height: 70px;}
#navigation_box_frame.affix{ 
    -webkit-box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6);
    -moz-box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6);
    box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6);
}

/**********************************************/
/* Sticky Menu Wrapper */
/* min-height needed to avoidnjumping content on affix */
/**********************************************/
#page_header #affix_sticky_wrapper{ min-height:58px;}

/**********************************************/
/* Main Navigation (+ toggle button)
/**********************************************/
.navigation_toggle{}

/* ********************************************************************** */
/* Content
/* ********************************************************************** */
#content_box {min-width:1200px !important; padding:0; min-height:400px;}

/**********************************************/
/* Footer  */
/**********************************************/

footer#utility_container_top{ background-color: #0D669A; min-height: 20px;}
footer#utility_container_top #ecoprocura_logo{ text-align:center; padding:40px 0;}
footer#utility_container_top #logo_about{ color:white; font-size: 14px;    margin-bottom: 20px; }
footer#utility_container_top #logo_about #footer_logo_eu{ width:75px; height:110px; }
footer#utility_container_top #logo_about #footer_logo_iclei{ width: 100px; height: 63px; margin-right: 20px; }
footer#utility_container_top #logo_about div.logo{     display: inline;  float: left; }
footer#utility_container_top span.heading{ display: block; }
footer#utility_container_bottom{ background-color: #005E92;    padding-bottom: 15px;     min-height: 55px; }
footer#utility_container_bottom #usefull_links {float:right;     margin-top: 20px;}
footer#utility_container_bottom #usefull_links a{ color:white;  font-size: 14px;     margin-left: 60px;}



/**********************************************/
/* Media Queries 
/**********************************************/


/* 768 - 1024*/
@media (min-width: 768px) and (max-width:1025px) {          

    /* flickr / navigation elements  */
    .flickr-album {margin:0px;}
    #navigation_box_frame.affix #ecoprocura_logo_box img{ display: none;}
    #navigation_box_frame.affix #ecoprocura_logo_box img.sticky_logo { display: none;}
}

/* 980 - 1200 (includes 1024)*/
@media only screen and (min-width: 980px) and (max-width:1199px) {          

    /* General */
    .centered_container{width:980px;}
    #page_header{min-width:980px !important;}
    #content_box {min-width:980px !important;}
    footer{min-width:980px !important;}
    /*  navigation elements */
    #navigation_box_frame.affix-top #social_media_button_box {display: none;}
    #navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation { float: right;}

}


/* 768 - 980 */
@media only screen and (min-width: 768px) and (max-width:979px) {  


    /* General */
    .centered_container{width:768px;}
    #page_header{min-width:768px !important;}
    #content_box {min-width:768px !important;}
    footer{min-width:768px !important;}      

    /* Main Navigation */
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box { width: auto; /*width:100%;*/}

    #navigation_box_frame #logo_navigation_box #main_navigation_box { position: relative; width: 100%; float: left;}
    #navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation {margin-left: 0px;}


    #page_header #banner_line {margin-top:0px;}
    #page_header #banner_button_frame { margin-top: 180px;}

    #page_header #banner_button_box .banner_button .banner_button_link {    font-size: 18px;}
}


/* < 768  */
@media only screen and (max-width: 767px){

    /* General */
    .centered_container{width:100% !important;}
    #page_header{min-width:100% !important;}
    #page_header{background-color:white; background-position:left; background-size:cover; background-repeat: no-repeat;min-height: 440px; }    
    #content_box {min-width:100% !important;}
    footer{min-width:100% !important;}


    /* HEADER */
    #ecoprocura_logo_box{width:70%;}
    #ecoprocura_logo_box a{display:inline-block; width:100%; margin-bottom:15px;}
    #ecoprocura_logo_box a img{margin:0 3%;}

    #page_header #banner_line {display: none;}
    #page_header #banner_image_text img {width:70%;}

    /* Navigation toggle button */
    #navigation_toggle_box{display:inline-block; float: right; text-align: center; width:30%;}
    #navigation_toggle_box .navigation_toggle{    display: inline-block; width: 40px;  height: 40px; font-size: 32px;  font-size: 30px; color: #F9B21C;  float: right; padding: 22px;     margin-right: 10px;}


    /* social media buttons / utlity buttons */
    #social_media_button_box {display:none;}
    #utility_button_box{display:none;}   

    /* Navigation boxes*/
    #logo_navigation{}
         
    #navigation_box_frame{ position:relative; box-shadow:none;}
    #navigation_box_frame #logo_navigation_box #main_navigation_box {display:none; float:right; width:100%; height: 100%; display:block; text-align:center; position:relative;}
    #navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation {position:relative; display:inline-block; width:94%; margin:0 auto; }
    #navigation_box_frame #logo_navigation_box {padding-bottom: 10px;}

    #navigation_box_frame {margin-bottom: 0px;}
    #navigation_box_frame.affix{ position:relative; box-shadow:none;}
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box {width:100%; margin-top: 20px;}

    #navigation_box_frame.affix #social_media_button_box_subpage {display:none;}
    #navigation_box_frame.affix-top #utility_button_box {display:none;}
    #navigation_box_frame.affix #ecoprocura_logo_box img {  width: 160px; }

    /* Footer */
    footer{min-width:100% !important;}    
    
     /* Flickr */
    .flickr-album {margin:0px;}
    

    #banner_button_box .banner_button {text-align: center; }
    #banner_button_box .banner_button .banner_button_link {float:left; color: #0D669A; padding: 15px; border: 5px solid #0D669A; margin:10px;}


    /* Navigation toggle button */	
    #navigation_toggle_box{     
        display: inline-block;
        text-align: right;
        padding: 45px 6px 8px 16px;
        height: 96px;
        float: none;
        vertical-align: middle;
        text-align: center;
        display: inline-block;
        text-align: right;
        padding: 15px 20px 0px 0px;
        float: right;
        vertical-align: middle;
        text-align: center;}

    #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
        display:inline-block; 
        width:40px; 
        height:40px; 
        font-size:32px; 
        font-size:28px;            
        cursor: pointer;
        border-radius: 1px;
        height: 5px;
        width: 35px;
        color: #F9B21C ;
        background-color: #F9B21C;
        position: absolute;
        display: block;
        content: '';
    }
    #nav-toggle span:before {
        top: -10px;
    }    
    #nav-toggle span:after {
        bottom: -10px; 
    }    
    #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
        transition: all 500ms ease-in-out;
    }
    #nav-toggle.active span {
        background-color: transparent;
    }
    #nav-toggle.active span:before, #nav-toggle.active span:after {
        top: 0;
    }
    #nav-toggle.active span:before {
        transform: rotate(45deg);
    }
    #nav-toggle.active span:after {
        transform: rotate(-45deg);
    }






} /* end of < 768  */

@media only screen and (max-width: 480px){    

    #page_header {
        min-height: 300px;
    }
    
       

}