*{
margin:0;
padding:0;
}
HTML,BODY{
height:100%;
width:100%;
}
BODY{
font:1.15em/1.5em Helvetica, Arial, sans-serif;
text-align:justify;
color:#111;
}
@media (min-width:1600px){
BODY{
background:url(images/design/background.jpg);
}
#background-gradient{
position:fixed;
top:0;
height:100%;
width:100%;
z-index:-1;
background-image:linear-gradient(rgba(255,255,255,0.75), rgba(3,78,162,0.75));
}
}
A{
color:#004b9f;
text-decoration:none;
}
A:hover{
color:#111;
text-decoration:underline;
}

/* HEADER */

HEADER{
position:fixed;
width:100%;
max-width:1600px;
top:0;
left:50%;
transform:translateX(-50%);
z-index:2;
background-color:#FFF;
text-align:center;
}
#projecttitle{
display:flex;
align-items:center;
justify-content:center;
font:1.05em/1.5em "Arial Black", Gadget, sans-serif;
height:110px;
}
#logo-metves IMG{
float:left;
margin:10px;
margin-left:15px;
max-width:calc(100% - 3em - 36px);
}
#logo-euramet IMG{
float:right;
margin:10px;
margin-right:15px;
height:90px;
max-width:calc(100% - 3em - 36px);
}
@media(min-width:800px){
#logo-metves IMG{
height:90px;
}
}
@media(max-width:800px){
HEADER{
height:90px;
border-bottom:2px solid #004b9f;
}
#logo-metves IMG{
height:70px;
}
}

/* BARS */

#horizontal-bar-background{
position:fixed;
top:110px;
z-index:0;
height:40px;
width:100%;
background: url("images/design/ruler_bar.png") repeat-x bottom;
background-size:auto 40px;
}

/* MENU */

@media(min-width:800px){
#main-menu{
width:100%;
font-size:1.1em;
font-weight:bold;
height:40px;
background:url("images/design/ruler_bar.png") repeat-x bottom;
background-size:auto 40px;
}
#main-menu IMG{
display:none;
}
#main-menu ul{
list-style-type:none;
display:flex;
justify-content:center;
height:100%;
align-items: center;  
}
#main-menu ul li{
display:flex;
justify-content:center;
background-color:#FFF;
float:left;
position:relative;
}
#main-menu ul li a{
color:#111;
padding-right:.8em;
text-decoration:none;
}
#main-menu ul li:hover a{
color:#004b9f;
}
#main-menu ul li ul{
display:none;
}
#main-menu ul li:hover ul{
display:block;
position:absolute;
top:26px;
white-space:nowrap;
left:50%;
transform:translateX(-50%);
z-index:3;
}
#main-menu ul li:hover ul li{
border-radius:8px;
background-image:linear-gradient(#FFF, #E6EDF4);
border:2px solid #111;
width:100%;
margin-bottom:-2px;
}
#main-menu ul li:hover ul li a{
color:#111;
margin-left:0em;
line-height:1.5em;
font-size:.9em;
width:100%;
padding:0 0.8em 0 0.8em;
}
#main-menu ul li ul li:hover{
background-image:linear-gradient(#FFF, #C5D5E6);
border:2px solid #004b9f;
z-index:4;
}
}
@media(max-width:800px){
#main-menu{
position:absolute;
right:0;
top:5px;
width:auto;
height:80px;
background-image:none;
z-index:6;
}
#main-menu a{
color:#111;
line-height:1.7em;
font-weight:bold;
}
#main-menu IMG{
margin:18px;
height:44px;
}
#main-menu ul{
display:none;
list-style-type:none;
}
#main-menu ul li a{
display:block;
margin-left:1em;
}
#main-menu:hover IMG{
opacity:0;
}
#main-menu:hover ul{
position:fixed;
display:block;
background:#FFF;
width:100%;
top:0;
left:0;
z-index:-1;
}
#main-menu:hover ul ul{
display:none;
list-style-type:none;
}
#main-menu:hover ul li{
border-bottom:2px solid #777;
}
#main-menu:hover ul li a:hover{
color:#004b9f;
}
#main-menu ul li:hover ul{
display:block;
position:relative; 
border:0;
font-size:0.9em;
z-index:1;
}
#main-menu ul li:hover ul li{
margin-left:.5em;
border-bottom:0;
}
#main-menu ul li:hover ul li a{
position:relative;
margin-left:1.5em;
}
}

/* CONTENT */

#content-container{
position:relative;
margin:auto;
max-width:1600px;
z-index:1;
background-color:#EDF2F8;
}
@media(min-width:800px){
#content-container{
min-height:calc(100% - 150px - 1.5em + 1px);
padding-top:calc(90px + 40px + 20px);
}
}
@media(max-width:800px){
#content-container{
min-height:calc(100% - 90px - 1.5em + 1px);
padding-top:calc(70px + 20px);
}
}
#article-main{
width:600px;
max-width:calc(100% - 2em);
margin:auto;
padding-top:1em;
text-align:center;
font-size:1.05em;
}
#content{
width:calc(100% - 1em);
margin:-0.5em 0.5em 0.5em 0.5em;
display:inline-block;
}
.article-sub{
background-color:#FFF;
border-radius:18px;
padding:1em 1em 0.25em 1em;
margin:0.5em;
}
.article-3-cols{width:calc(33.33% - 3em);}
@media(max-width:1250px){.article-3-cols{width:calc(50% - 3em);}}
@media(max-width:800px){.article-3-cols{width:calc(100% - 3em);}}
.article-2-cols{width:calc(50% - 3em);}
@media(max-width:1250px){.article-2-cols{width:calc(100% - 3em);}}
H1{
font-size:1.3em;
font-weight:bold;
margin-bottom:0.5em;
}
H2{
font-size:1.1em;
color:#004b9f;
font-weight:bold;
text-align:center;
margin-bottom:.5em;	
}
H3{
font-size:1em;
font-weight:bold;
color:#333;
}
P{
clear:both;
padding-bottom:.75em;
}
SUP{
line-height:1em;
}
FIGURE{
padding-bottom:.75em;
}
FIGCAPTION{
font-size:.9em;
text-align:center;
line-height:1.4em;
}
ARTICLE IMG{
display:block;
max-width:50%;
height:auto;
padding:0.25em 0 .25em 0;
margin:auto;
}
ARTICLE OL{
margin-left:1em;
text-align:left;
padding-bottom:.75em;
}
ARTICLE UL{
margin-left:1em;
text-align:left;
padding-bottom:.75em;
}
IFRAME{
display:block;
margin:0 auto;
margin-bottom:0.75em;
}

/* FOOTER */

FOOTER{
max-width:1600px;
z-index:2;
margin:auto;
font-size:0.9em;
line-height:1.5em;
text-align:center;
background-image:linear-gradient(#FFF, #EDF2F8);
border-top:2px solid #004b9f;
}
/* remove on small screens due to lack of space */
@media(max-width:800px){
.mobile-remove{
display:none;
visibility: hidden;
}
}

/* TABLES */

.table{
display:table;
}
.table_row{
display:table-row;
}
.table_cell{
display:table-cell;
padding-bottom:0.5em;
text-align:left;
}

/* OTHER */

/* hide Google badge */
.grecaptcha-badge {
visibility:hidden !important;
}
/* text popups abbreviations*/
.create-text-popup{
position:relative;
display:inline-block;
color:#004b9f;
cursor:pointer;
}
.create-text-popup .text-popup{
visibility:hidden;
position:absolute;
text-align:center;
top:-1.5em;
left:-5em;
background-image:linear-gradient(#FFF,#EEE);
border:2px solid #777;
border-radius:8px;
color:#111;
padding:0 1em 0 1em;
white-space:nowrap;
}
.create-text-popup:hover .text-popup{
visibility:visible;
z-index:5;
}
/* mailing list form */
#email,#button{
width:calc(100% - 1em);
max-width:15em;
border:1px solid #777;
line-height:1.5em;
font-size:1em;
padding:0 0.5em 0 .5em;
box-sizing:content-box;
display:block;
float:left;
height:1.5em;
margin:0.5em 0.5em 0.5em 0;
}
#button{
background-image:linear-gradient(#FFF,#EEE);
width:auto;
}
/* text options */
.nowrap{
white-space:nowrap;
}
.indent{
text-indent:1.5em;
}
.noindent{
text-indent:0;
}
.width100{
max-width:100%;
}
.width75{
max-width:75%;
}
.width25{
max-width:25%;
}
.left{
text-align:left;
}
.center{
text-align:center;
}
#group-photo{
background-color:#FFF;
border-radius:18px;
padding:1em 1em 0.25em 1em;
margin:0 1em 1em 1em;
width:calc(100% - 4em);
}
#group-photo IMG{
display:block;
width:75%;
height:auto;
padding:0.25em 0 .25em 0;
margin:auto;
}