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

/**********************************************/
/* Color definitions: new  

    Red: #ea6674
    Yellow: #eebb50
    Blue: #004a99
    Grey footer: #4e4e4e / #3e3e3e

/**********************************************/
/* Color definitions: old

  Blue (Logo): rgb(0,76,153) #004C99  
  Red: rgb(234,101,111) #EA656F
  Orange: rgb(239,188,69) #EFBC45
  Green: rgb(127,161,120) #7FA178
  dark grey: rgb(65,67,72); #414348
  Yellow (Logo): rgb(255,232,0) #FFE800

*/

/**********************************************/
/* General - Desktop first
/* BIG and beyond - (could be: Desktops/ Tablets landscape) */
/* @media only screen and (min-width: 1180px)*/
/**********************************************/


/* ********************************************************************** */
/* General container 
/* ********************************************************************** */
.full_width_container {width:100%; text-align:center;}
.centered_container {width:1200px; margin:0 auto; text-align:left;}
.centered_container .centered_container {width:auto;}



/* ********************************************************************** */
/* Header
/* ********************************************************************** */
#page_header {width:100%;}


/**********************************************/
/* Navigation toggle button
/**********************************************/
#navigation_toggle_box {display:none;}

/**********************************************/
/* Social Media
/**********************************************/
#social_media_button_box {margin-top:20px; float:right; margin-right:15px;}
#social_media_button_box .social_media_button i {float:right; color:#004a99; font-size:15px; margin-top:-5px; margin-left:10px;}
#social_media_button_box .social_media_button i.fa-envelope {font-size:20px;}
#social_media_button_box .social_media_button i.fa-twitter {font-size:20px;}


/* ********************************************************************** */
/* Navigation Box
/**********************************************/
#navigation_box_frame {position: absolute; z-index: 5;}
#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; text-align: center;}
#navigation_box_frame #logo_navigation_box #logo_small {float:left; width:auto; margin-top:25px; margin-bottom: 25px;}

#navigation_box_frame #logo_navigation_box #logo_small a img {width:100%; height:auto;}

#navigation_box_frame #logo_navigation_box #main_navigation_box {float:none; width:auto; display:block; text-align:center; position:static; margin-top:50px;}
#navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation {position:static; display:inline-block; margin:0;}


/**********************************************/
/* Language Selection Menu
/**********************************************/
#navigation_box_frame #logo_navigation_box #language_selection_menu {float: right; margin-top: 9px;}
#navigation_box_frame #logo_navigation_box #language_selection_menu button {background-color: transparent; border: none; color: #004C99; font-size: 0.8em; font-weight: bold; font-family:'EC-Square-Sans-Pro-Bold', sans-serif;}

/**********************************************/
/* Sticky / Affix
/**********************************************/
#navigation_box_frame.affix {position:fixed; top:0; width:100%; z-index:230; height:auto; background-color: white;}

#navigation_box_frame.affix #logo_navigation_box #logo_small {display:inline-block; float:left; padding-top:8px; margin:0;}
#navigation_box_frame.affix #logo_navigation_box #logo_small a img {width:75%; height:auto;}

#navigation_box_frame.affix #social_media_button_box {display:inline-block; float:right;}

/*#navigation_box_frame.affix #logo_navigation_box #language_selection_menu {display:inline-block; float:right;}
#navigation_box_frame.affix #logo_navigation_box #language_selection_menu span.active {display:none;}
#navigation_box_frame.affix #logo_navigation_box #language_selection_menu button::before {content:' '; white-space:pre;}*/

#navigation_box_frame.affix #logo_navigation_box #main_navigation_box {display:inline-block; padding:0; margin:0;}
/**********************************************/
/* 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:10px 0; min-height:800px;*/ position:relative;}

/**********************************************/
/* SUB TITLE 
/**********************************************/
div.subtitle_overlay {text-align: center; width: 100%; position: absolute;}
div.subtitle_overlay .inner {position: relative; margin-top: 25%; z-index:1;}
/**********************************************/
/* Footer 
/**********************************************/
footer#footer_box_frame {background-image:url(/fileadmin/templates/iuc/images/overlay_footer_dark.png); background-size:cover; background-position:center top; width:100%; min-height:290px;}
footer#footer_box_frame * {color:white;}
footer#footer_box_frame #footer_box_frame_overlay {width:100%; height:100%;}

/**********************************************/
/* Footer : Contact
/**********************************************/
footer #footer_contact {text-align: center; margin-top: 100px;}
footer #footer_contact p {/*color:white;*/}

/**********************************************/
/* Footer : Disclaimer
/**********************************************/
footer #footer_disclaimer {text-align: center;}
footer #footer_disclaimer img {width:100px; height:auto;}
footer #footer_disclaimer p {color:white; font-size: 14px; margin: 10px; padding-top: 5px;}


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

/* 980 - 1200 */
@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;}

    /* Main navigation menu */
}

/* 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 menu */
    #navigation_box_frame.affix #logo_navigation_box #logo_small {display:inline-block; float:left; padding-top:8px; margin:0;}
    #navigation_box_frame.affix #logo_navigation_box #logo_small a img {float:left; width:50%; height:auto;}

    #navigation_box_frame.affix #logo_navigation_box #social_media_button_box {display:inline-block; float:right; background-color:white; padding:10px 0 8px 8px; margin:0;}

    #navigation_box_frame.affix #logo_navigation_box #language_selection_menu {display:inline-block; float:right; padding:0; margin:0;}
    #navigation_box_frame.affix #logo_navigation_box #language_selection_menu span.active {display:none;}
    #navigation_box_frame.affix #logo_navigation_box #language_selection_menu button::before {content:'REGION';}
    #navigation_box_frame.affix #logo_navigation_box #language_selection_menu ul {font-size:14px;}

    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box {display:inline-block; font-size:15px;}
}

/* < 768  */
@media only screen and (max-width: 767px){
    /* General */
    .centered_container {width:100% !important;}
    #page_header {min-width:100% !important;}
    #content_box {min-width:100% !important; overflow:hidden;}
    footer {min-width:100% !important;}

    /* ********************************************************************** */
    #page_header {background-image:none; height:90px;}
    #page_header #affix_sticky_wrapper {min-height:0;}

    #navigation_box_frame.affix #logo_navigation_box #logo_small {display:inline-block; width:30%; height:57px; padding-top:8px; margin:0;}
    #navigation_box_frame.affix #logo_navigation_box #logo_small a img {width:118px; height:48px;}

    #navigation_box_frame.affix #logo_navigation_box #language_selection_menu {display:inline-block; float:right; width:70%; height:57px; padding:0; margin:0;}
    #navigation_box_frame.affix #logo_navigation_box #language_selection_menu span.active {display:none;}
    #navigation_box_frame.affix #logo_navigation_box #language_selection_menu button::before {content:'REGION';}
    #navigation_box_frame.affix #logo_navigation_box #language_selection_menu ul {font-size:12px;}

    #navigation_box_frame.affix #logo_navigation_box #social_media_button_box {display:inline-block; float:left; width:90%; background-color:rgb(0,76,153); padding:8px 0 8px 8px; margin:0;}
    #navigation_box_frame.affix #logo_navigation_box #social_media_button_box .social_media_button {display:inline-block; float:left; width:40px; height:30px; font-size:28px; padding-top:8px}
    #navigation_box_frame.affix #logo_navigation_box #social_media_button_box .social_media_button i {color:white;}
    
    .glyphicon-menu-hamburger {color:white;}
    .glyphicon-menu-hamburger:link {text-decoration:none;}
    .glyphicon-menu-hamburger:hover, .glyphicon-menu-hamburger:focus {color:white;}
    #navigation_box_frame.affix #logo_navigation_box #navigation_toggle_box {display:inline-block; width:10%; text-align:right; background-color:rgb(0,76,153); padding:8px 8px 8px 0;}
    #navigation_box_frame.affix #logo_navigation_box #navigation_toggle_box .navigation_toggle {display:inline-block; width:40px; height:30px; font-size:22px;}

    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box {background-color:rgb(0,76,153); width:100%;}

    footer {min-width:100% !important;}
} /* end of < 768  */