/**********************************************/
/* 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  */
/* ********************************************************************** */
body{font-family:'Roboto', sans-serif; font-size:15px; color:rgb(100,100,100);}

::-moz-selection { background:#089bd9 !important; color:white !important; text-shadow: none; }
::selection { background:#089bd9 !important; color:white !important; text-shadow: none; }


/* ********************************************************************** */
/* Content container
/* ********************************************************************** */
.centered_with_container{width:1200px; margin:0 auto; overflow:hidden; text-align:left;}
.centered_with_container .centered_with_container{width:auto;}
/* ********************************************************************** */
/* full width container
/* ********************************************************************** */
#content_box > .full_width_container > .centered_container.no_padding{padding:10px 0;}
.full_width_container{width:100%; text-align:center;}
.full_width_container_top{text-align:left;}
/* ********************************************************************** */
/* STANDARD CONTENT ELEMENTS */
/* ********************************************************************** */
#content_box { }

#content_box p{font-size:1.25em; line-height:1.6em; margin:10px 0 10px 0; padding:0; font-weight: 300; color: #4A4A4A;}

#content_box em{ font-style:italic;}
#content_box strong{font-weight:bold;}
#content_box sub{}
#content_box sup{}
#content_box strike{text-decoration: line-through;}
#content_box u{text-decoration:underline;}

#content_box img{max-width:100%; height: auto;}

#content_box h1{ font-family: 'Hammersmith One', sans-serif; color:#F9B21C; font-size: 54px; line-height: 47px;}
#content_box h2{ font-family: 'Hammersmith One', sans-serif; color:#4A4A4A; font-size: 54px; line-height: 47px;  /*margin-top: 10px;*/}
#content_box h3{ font-family: 'Hammersmith One', sans-serif;  font-size: 32px; color: #4A4A4A; line-height: 26px;}
#content_box h4{ font-family: 'Hammersmith One', sans-serif;  font-weight: 700; font-size: 1.7em; margin-top:10px; color:#666666;}
#content_box h5{ font-weight: 400; font-size: 1.5em; margin-top: 10px; color: white; background-color: #666666; font-weight: 700;  padding: 20px 60px;}
#content_box h6{ font-weight: 400; font-size: 1.25em; margin-top:10px; font-weight: 700;}

#content_box a{color:#089bd9; background-color:transparent; font-weight: 900; text-decoration: none;}
#content_box a:link {color:#089bd9;}
#content_box a:visited {color:#089bd9;}
#content_box a:hover {background-color:transparent; color:#089bd9;  text-decoration: underline;}
#content_box a:active {}
#content_box a img{border:none; background-color:transparent;}
#content_box a:hover img{border:none; background-color:white;}

#content_box ul{margin:10px 0 10px 0px; overflow:hidden; padding-left:25px; }
#content_box ul li { }
#content_box ol{margin:10px 0 10px 0px; overflow:hidden; padding-left:25px; }
#content_box ol li{}

#content_box table{margin:10px 0 10px 0;}
#content_box table tr{}
#content_box table tr th{vertical-align:top; font-size:1em;}
#content_box table tr td{vertical-align:top; font-size:1em; /*width: 100%;*/ margin: 0; padding: 0;}//HRK

#content_box hr{margin:10px 0 10px 0; border:1px solid rgb(220,220,220); border-width:1px 0 0 0;}

#content_box div{font-size:inherit; color:inherit; line-height:inherit;}
#content_box span{font-size:inherit; color:inherit; line-height:inherit;}

#content_box blockquote {}
#content_box blockquote p{color:rgb(211,172,43); font-style:normal;}

#content_box pre{font-family:Courier, monospace;}
#content_box pre code{color:rgb(90,90,90);}

#content_box dl{}
#content_box dl dt{}
#content_box dt dd{}



/* ********************************************************************** */
/* ADDITIONAL STANDARD CLASSES */
/* ********************************************************************** */
#content_box .align-left{text-align:left;}
#content_box .align-right{text-align:right;}
#content_box .align-center{text-align:center;}
#content_box .align-justify{text-align:justify;}

.full_width_container.border{border-width: 1px 0px; border-style: solid; border-color: #cccccc; }

/* ********************************************************************** */
/* Orange Heading */
/* ********************************************************************** */

.full_width_container.orange_heading_top > div{ padding-left: 0px; margin-top: -180px; opacity: 0.99; border-left: 7px solid #F9B21C; position: relative;}
#content_box .orange_heading_top { margin-top: -10px; padding-top: 25px; /*padding-left: 20%;     padding-right: 5%;*/}
#content_box .orange_heading_top h1{ padding-left: 20px; margin-top: 200px;} 
#content_box .orange_heading_top p,#content_box .orange_heading_top  h1,#content_box .orange_heading_top  h2,#content_box .orange_heading_top  h3,#content_box .orange_heading_top  h4,#content_box .orange_heading_top  h5,#content_box .orange_heading_top  h6,#content_box .orange_heading_top  ul,#content_box .orange_heading_top  ol{
    padding-left: 20px;
} 

/* ********************************************************************** */
/* Dark Blue Bar Box  */
/* ********************************************************************** */
.full_width_container.dark_blue_heading_left > div{padding-top: 10px;}
#content_box .dark_blue_heading_left {margin-top: 50px; padding-bottom: 50px;}
#content_box .dark_blue_heading_left h1{} 
#content_box .dark_blue_heading_left p,#content_box .dark_blue_heading_left h1,#content_box .dark_blue_heading_left h2,#content_box .dark_blue_heading_left h3, #content_box .dark_blue_heading_left h4, #content_box .dark_blue_heading_left h5, #content_box .dark_blue_heading_left h6, #content_box .dark_blue_heading_left ul, #content_box .dark_blue_heading_left ol{ } 
#content_box .dark_blue_heading_left:before {
    content : "";
    position: absolute;
    left    : 0;
    height  : 1px;
    width   : 40%;
    border-bottom:7px solid #005E92;
    margin-top: -15px;
}

/* ********************************************************************** */
/* Light Blue Bar Box  */
/* ********************************************************************** */
.full_width_container.light_blue_heading_right > div{padding-top: 10px;}
#content_box .light_blue_heading_right {margin-top: 50px;      /*padding-bottom: 50px;*/}
#content_box .light_blue_heading_right h1{} 
#content_box .light_blue_heading_right p,#content_box .light_blue_heading_right h1,#content_box .light_blue_heading_right h2,#content_box .light_blue_heading_right h3, #content_box .light_blue_heading_right h4, #content_box .light_blue_heading_right h5, #content_box .light_blue_heading_right h6, #content_box .light_blue_heading_right ul, #content_box .light_blue_heading_right ol{ } 
#content_box .light_blue_heading_right h2 {margin-left: 15%; margin-right: 15%;}
#content_box .dark_blue_heading_left h2{margin-right: 30%;}
#content_box .light_blue_heading_right:before {
    content : "";
    position: absolute;
    right    : 0;
    height  : 1px;
    width   : 40%;
    border-bottom:7px solid #00AEEF;
    margin-top: -15px;
}

/* ********************************************************************** */
/* General text color in non-white BG elements(BG, inverted, etc)
/* ********************************************************************** */
#content_box .inverted *{color:white; }

#content_box .inverted a, 
#content_box .inverted a:link, 
#content_box .inverted a:visited {} 
#content_box .inverted a:hover {}

#content_box .inverted pre code{color:rgb(90,90,90); }


/* ********************************************************************** */
/* Link styles (coloured link buttons)
/* ********************************************************************** */
#content_box .content_tile a[class^="link"]{display:inline-block; text-decoration:none; padding:8px 16px; border-radius:1px; border:1px solid white; }
#content_box .content_tile a[class$="Border"]{ background-color:white;   }
#content_box .content_tile a[class$="BG"]{color:white;}

#content_box a.noBox {color:#089bd9; font-weight: _bold; background-color:transparent; text-decoration:underline; font-weight: 900;}
#content_box a.noBox:after { content:" \00bb"; }
#content_box a.noBox:link { text-decoration:underline; }
#content_box a.noBox:hover {background-color:#089bd9; color:white;}


#content_box .content_tile a.linkGreyBorderOnHover{font-family: 'Hammersmith One', sans-serif; font-size: 32px; color: #4A4A4A; line-height: 26px;  padding: 15px; border-radius:10px; border: 5px solid white;  }
#content_box .content_tile a.linkGreyBorderOnHover:hover{color:#0D669A; text-decoration: none; border-radius:10px; border: 5px solid #0D669A; }

#content_box .content_tile a.linkGreyBGOnHover{font-family: 'Hammersmith One', sans-serif; font-size: 32px; color: #4A4A4A; line-height: 26px; padding: 15px;border-radius:10px; border: 5px solid white;}
#content_box .content_tile a.linkGreyBGOnHover:hover{color:white; background-color: #00AEEF;   text-decoration: none; border-radius:10px; border: 5px solid #00AEEF;}


#content_box .content_tile a.linkBlueBorder{font-family: 'Hammersmith One', sans-serif; font-size: 32px;  line-height: 26px;color:#0D669A; padding: 15px;text-decoration: none; border-radius:10px; border: 5px solid #0D669A;}
#content_box .content_tile a.linkBlueBorder:hover{color:white; background-color:#0D669A; text-decoration: none;  border-radius:10px; border: 5px solid #0D669A;}

#content_box .content_tile a.linkBlueBG{font-family: 'Hammersmith One', sans-serif; font-size: 32px; color: white; line-height: 26px;color:white; background-color: #00AEEF;  padding: 15px; text-decoration: none; border-radius:10px;border: 5px solid #00AEEF;}
#content_box .content_tile a.linkBlueBG:hover{ color:#00AEEF; background-color: white;   text-decoration: none; border-radius:10px; border-radius:10px; border: 5px solid #00AEEF;}


/* ********************************************************************** */
/* General Box Classes */
/* ********************************************************************** */
#content_box .box{}
#content_box .content_tile{}
#content_box .has_padding{padding:10px;}
#content_box .solidBG{border-radius:inherit; text-align:left; border-width:3px; border-style:solid;}
#content_box .borderBox{border-radius:inherit; border-width:3px; border-style: solid; text-align:left;}
#content_box .content_tile.inverted{color:white;}

#content_box .whiteBG{ background-color:white;border-color:white;}
#content_box .lightblueBG{ background-color:#00AEEF;border-color:#00AEEF;}
#content_box .darkblueBG{ background-color:#0D669A; border-color:#0D669A;}
#content_box .greyBG{ background-color:#cccccc; border-color:#cccccc;}

#content_box .whiteBorder{border-color:white;}
#content_box .lightblueBorder{border-color:#00AEEF;}
#content_box .darkblueBorder{border-color:#0D669A;}
#content_box .greyBorder{border-color:#cccccc;}


/* ********************************************************************** */
/* Link style in some of the BG boxes
/* ********************************************************************** */
#content_box .linkBlueBG a { color:white; }
#content_box .linkBlueBG a:hover{ background-color: white; color:#00AEEF;}

/* ********************************************************************** */
/* style in boxes
/* ********************************************************************** */
#content_box .box p{font-size:1.1em;}
#content_box .content_tile .box  div.csc-header{    padding: 5px 10px 5px 10px; margin:0; overflow:hidden;}
/* ********************************************************************** */
/* Content Tile header
/* ********************************************************************** */
#content_box .content_tile div.csc-header{    padding: 5px 10px 5px 0px; margin:0; overflow:hidden;}

#content_box .content_tile.no_padding div.csc-header{}
#content_box .content_tile.has_padding div.csc-header{margin:-10px -10px 0 -10px;}

#content_box .content_tile div.csc-header h1{/*margin:0; padding:0;*/}
#content_box .content_tile div.csc-header h2{margin:0; padding:0;}
#content_box .content_tile div.csc-header h3{margin:0; padding:0;}
#content_box .content_tile div.csc-header h4{margin:0; padding:0;}
#content_box .content_tile div.csc-header h5{margin:0; padding:0;}
#content_box .content_tile div.csc-header h6{margin:0; padding:0;}


/* ********************************************************************** */
/* Accordions */
/* ********************************************************************** */
#content_box .content_tile.box-accordion{border:1px solid rgb(30,104,129); background-color:white;}
#content_box .content_tile.box-accordion .csc-header{ cursor:pointer; margin:-10px -10px 0 -10px; padding:0;}
#content_box .content_tile.box-accordion .csc-header .csc-firstHeader{ cursor:pointer; color:white; margin:0; padding:5px 10px; background-color:rgb(30,104,129);}
#content_box .content_tile.box-accordion .csc-header:hover{color:white !important; background-color:rgb(30,104,129);}
#content_box .content_tile.box-accordion .accordion-content{padding:10px;}

#content_box .content_tile.expanded {}
#content_box .content_tile.expanded .csc-header:after{font-family: 'FontAwesome'; color:white; content: "\f078"; font-size:1.3em; margin:-34px 10px 0 0; display: inline-block; float:right; font-weight: normal;}
#content_box .content_tile.expanded .csc-header:hover:after{color:rgb(211,172,43);}

#content_box .content_tile.collapsed {padding-bottom:0 !important;}
#content_box .content_tile.collapsed .csc-header:after{font-family: 'FontAwesome'; color:white; content: "\f054"; font-size:1.3em; margin:-31px 10px 0 0; display: inline-block; float:right; font-weight: normal;}
#content_box .content_tile.collapsed .csc-header:hover:after{color:rgb(211,172,43);}



/* ********************************************************************** */
/* FIRST ELEMENT IN CONTENT AREA - margin-top*/
/* ********************************************************************** */
#content_box .content_tile.has_padding p:first-child{margin-top:0;}
#content_box .content_tile.has_padding h1:first-child{margin-top:0;}
#content_box .content_tile.has_padding h2:first-child{margin-top:0;}
#content_box .content_tile.has_padding h3:first-child{margin-top:0;}
#content_box .content_tile.has_padding h4:first-child{margin-top:0;}
#content_box .content_tile.has_padding h5:first-child{margin-top:0;}
#content_box .content_tile.has_padding h6:first-child{margin-top:0;}
#content_box .content_tile.has_padding ul:first-child{margin-top:0;}
#content_box .content_tile.has_padding ol:first-child{margin-top:0;}
#content_box .content_tile.has_padding table:first-child{margin-top:0;}
#content_box .content_tile.has_padding blockquote:first-child{margin-top:0;}
#content_box .content_tile.has_padding img:first-child{margin-top:0;}



/* ********************************************************************** */
/* FCE (Typo3 Flexible Content elements)
/* ********************************************************************** */
.two_colums_50_50{}
.two_colums_50_50 > .column_50_50{min-height:1px; width:50%;}
.two_colums_50_50 > .column_left{float:left;}
.two_colums_50_50 > .column_right{float:right;}

.two_colums_33_66{}
.two_colums_33_66 > .column_33_66{min-height:1px; }
.two_colums_33_66 > .column_left{float:left; width:40%;}
.two_colums_33_66 > .column_right{float:right; width:60%; padding-right: 5%;padding-left: 10%;}

.two_colums_66_33{}
.two_colums_66_33 > .column_66_33{min-height:1px; }
.two_colums_66_33 > .column_left{float:left; width:60%;}
.two_colums_66_33 > .column_right{float:right; width:40%;    padding-left: 20px;}

.three_colums_33_33_33{}
.three_colums_33_33_33 > .column_33_33_33{min-height:1px; width:33.333333%;}
.three_colums_33_33_33 > .column_left{float:left; padding-right:20px; }
.three_colums_33_33_33 > .column_middle{float:left; padding-right:10px;padding-left:10px;}
.three_colums_33_33_33 > .column_right{float:right; margin-right:0; padding-left:20px;}


.three_colums_20_60_20{}
.three_colums_20_60_20 > .column_20_60_20{min-height:1px; }
.three_colums_20_60_20 > .column_left{float:left; padding-right:20px; width:20%;}
.three_colums_20_60_20 > .column_middle{float:left; padding-right:10px;padding-left:10px; width:60%;}
.three_colums_20_60_20 > .column_right{float:right; margin-right:0; padding-left:20px; width:20%;}

.three_colums_40_40_20{}
.three_colums_40_40_20 > .column_40_40_20{min-height:1px; }
.three_colums_40_40_20 > .column_left{float:left; padding-right:20px; width:40%;}
.three_colums_40_40_20 > .column_middle{float:left; padding-right:10px;padding-left:10px; width:40%;}
.three_colums_40_40_20 > .column_right{float:right; margin-right:0; padding-left:20px; width:20%;}

.four_colums_25_25_25_25{}
.four_colums_25_25_25_25 > .column_25_25_25_25{min-height:1px; width:25%;}
.four_colums_25_25_25_25 > .column_left{float:left;}
.four_colums_25_25_25_25 > .column_middle_left{float:left;}
.four_colums_25_25_25_25 > .column_middle_right{float:left;}
.four_colums_25_25_25_25 > .column_right{float:right; margin-right:0;}


/*Special footer column: */
footer#utility_container_top #logo_about > .column_middle_left{padding-right: 2%;}
footer#utility_container_top #logo_about > .column_middle_right{padding-left:6%;}

/**********************************************/
/* Media Queries 
/**********************************************/
/* > 1280 large screens */
@media only screen and (min-width: 1281px) {   
    .two_colums_33_66 > .column_left{float:left; width:33%;}
    .two_colums_33_66 > .column_right{float:right; width:66%; padding-right: 5%;padding-left: 5%;}

    .two_colums_66_33 > .column_left{float:left; width:66%;}
    .two_colums_66_33 > .column_right{float:right; width:33%;    padding-left: 10px;}
}


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

    #content_box .light_blue_heading_right h2 {margin:0px;  font-size: 48px;}
    #content_box .dark_blue_heading_left h2 {margin:0px;}

    .three_colums_20_60_20 > .column_middle {width: 80%;}
    .three_colums_40_40_20 > .column_middle  {width: 60%;}
    
    //adjust font sizes
    #content_box p {font-size: 1.15em;}
    //adjust font sizes
    #content_box h1, #content_box h2, #content_box .light_blue_heading_right h2{ font-size: 48px; }

#content_box .content_tile a.linkBlueBG {    margin: 2%;}
}


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

    .two_colums_50_50 > .column_50_50{margin:0;}
    .two_colums_50_50 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; }
    .two_colums_50_50 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;}

    .two_colums_33_66 > .column_33_66{margin:0;}
    .two_colums_33_66 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; }
    .two_colums_33_66 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px;}

    .two_colums_66_33{}
    .two_colums_66_33 > .column_66_33{margin:0;}
    .two_colums_66_33 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; }
    .two_colums_66_33 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px; padding:0px;}

    .three_colums_33_33_33{}
    .three_colums_33_33_33 > .column_33_33_33{margin:0;}
    .three_colums_33_33_33 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; padding:0px; }
    .three_colums_33_33_33 > .column_middle{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px; padding:0px;}
    .three_colums_33_33_33 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px; padding:0px;}


    .three_colums_20_60_20{}
    .three_colums_20_60_20 > .column_20_60_20{margin:0;}
    .three_colums_20_60_20 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; padding:0px; }
    .three_colums_20_60_20 > .column_middle{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px; padding:0px;}
    .three_colums_20_60_20 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px; padding:0px;}

    .three_colums_40_40_20{}
    .three_colums_40_40_20 > .column_40_40_20{margin:0;}
    .three_colums_40_40_20 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; padding:0px; }
    .three_colums_40_40_20 > .column_middle{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px; padding:0px;}
    .three_colums_40_40_20 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px; padding:0px;}


    .four_colums_25_25_25_25{}
    .four_colums_25_25_25_25 > .column_25_25_25_25{margin:0;}
    .four_colums_25_25_25_25 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; }
    .four_colums_25_25_25_25 > .column_middle_left{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px;}
    .four_colums_25_25_25_25 > .column_middle_right{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px;}
    .four_colums_25_25_25_25 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%;  margin-top:10px;}

    /*Special footer column: */
    footer#utility_container_top #logo_about > .column_middle_right {padding-left:0px; padding-top: 6%;}
    footer .four_colums_25_25_25_25 > .column_left {    text-align: center;}
    footer#utility_container_top #logo_about div.logo {float: unset;     text-align: center;}
    footer#utility_container_top #logo_about #footer_logo_iclei {margin:0px;}
    footer#utility_container_top #logo_about #footer_logo_eu{margin:0px;}
    
    //adjust line heights
    #content_box h1 { line-height: 56px;}
    //adjust font sizes
    #content_box h1, #content_box h2, #content_box .light_blue_heading_right h2{ font-size: 48px; }
    #content_box p {font-size: 1.15em;}
   
#content_box .content_tile a.linkBlueBG {    margin: 2%;}

} /* end of < 768  */


@media only screen and (max-width: 480px){    
    
    //adjust font sizes
    #content_box h1, #content_box h2{ font-size: 32px; }
    #content_box p {font-size: 1em;}
    #banner_button_box .banner_button .banner_button_link {font-size: 18px;}

}