html { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
body { background:#fff; font-family:Helvetica, Arial; margin:10px; padding:10px; }

a { color:black; }
a:hover { color:gray; }

hr { margin-top:20px; margin-bottom:20px; opacity: 0.25; }

#header { position:relative; height:100px; z-index:0; }
#header .logo { display:inline-block; border:0px; }
#header .menu_button { position:absolute; top:0px; right:0px; display:none; }
#header .menu_button img { width:30px; border:0px; }
#header .menu { position:absolute; display:inline; padding-left:20px; padding-top:70px; z-index:99; }
#header .menu ul { list-style-type:none; margin:0; padding:0; }
#header .menu li { float:left; }
#header .menu li a { display:inline; text-align:center; padding:16px; color:black; text-decoration:none; }
#header .menu li a:hover { color:gray; }
#header .menu li.curr a { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }

#content { position:relative; margin-left:2px; margin-top:20px; z-index:0; }
#content p.lien { margin:10px 0 0 0; }
#content p.lien a { font-size:95%; padding-left:20px; display:block; color:#333; text-decoration: underline; }
#content a.pdf { background: url('img/pdf.png') no-repeat top left; }
#content a.web { background: url('img/web.png') no-repeat top left; }
#content a.sld { background: url('img/slideshow.png') no-repeat top left; padding-left:30px !important; padding-right:20px; }

#content div.lien a { font-size:95%; padding-left:20px; display:inline; color:#333; text-decoration: underline; }

#content .left { position:fixed; width:250px; }
#content .right { float:none; padding-left:260px; padding-bottom:20px; }

#content .left .submenu { margin-bottom:15px; }
#content .left .submenu a { text-decoration:none; }
#content .left .submenu a:hover { color:gray; }
#content .left .submenu.curr a { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
#content .left .submenu.curr a h1 { font-size:100%; font-weight:normal; margin:0px; padding:0px; }
#content .left hr { display:none; }

#content .act .title { font-weight:bold; padding-bottom:5px; }
#content .act .text { }
#content .act p.lien a { display:inline; line-height:20px; }
#content .act a.pdf { padding-right:20px; }
#content .act img { width:100% !important; height:430px !important; object-fit:cover; }

#content .proj { display:inline-block; padding-right:15px; overflow:hidden; }
#content .proj img { height:134px; max-width:100%; object-fit:cover; }
#content .proj p { text-align:center; color:gray; font-size:90%; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#content .proj_detail .head { display:inline-block; padding-bottom:5px; }
#content .proj_detail .head h1 { font-size:100%; font-weight:normal; margin:0px; padding:0px; }
#content .proj_detail .head h1 .title { display:inline-block; font-weight: bold; }
#content .proj_detail .head h1 .year { display:inline-block; padding-left:5px; }
#content .proj_detail .text { font-size:80%; }

#content .proj_leaf { display:inline-block; vertical-align:top; margin-right:15px; overflow:hidden; }
#content .proj_leaf img { height:200px; max-width:100%; object-fit:cover; }
#content .proj_leaf .videox { background: url(/img/video_bg_button.png) no-repeat center; background-size:contain; }
#content .proj_leaf .videoxx { position:relative; background-image:url("/img/video_bg_button.png"); background-size:150px 150px; height:200px; width: 100%;; z-index:10; }
#content .proj_leaf p { font-size:90%; text-align:left; margin-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#content .expo .head { display:inline-block; padding-bottom:5px; }
#content .expo .head .title { display:inline-block; font-weight: bold; }
#content .expo .head .year { display:inline; padding-left:5px; }
#content .expo .text { font-size:90%; }

#content .expo_detail .head { display:inline-block; padding-bottom:5px; }
#content .expo_detail .head h1 { font-size:100%; font-weight:normal; margin:0px; padding:0px; }
#content .expo_detail .head h1 .title { display:inline-block; font-weight: bold; }
#content .expo_detail .head h1 .year { display:inline; padding-left:5px; }
#content .expo_detail .text { font-size:80%; }

#content .expo_leaf { display:inline-block; vertical-align:top; margin-right:15px; overflow:hidden; }
#content .expo_leaf img { height:200px; max-width:100%; object-fit:cover; }
#content .expo_leaf p { font-size:90%; text-align:left; margin-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#content .theorie .head { display:inline-block; padding-bottom:5px; }
#content .theorie .head .title { display:inline; font-weight: bold; }
#content .theorie .head .year { display:inline; padding-left:5px; }
#content .theorie .text { font-size:90%; }

#content .apropos .head { display:inline-block; padding-bottom:5px; }
#content .apropos .head .title { display:inline; font-weight: bold; }
#content .apropos .head .year { display:inline; padding-left:5px; }
#content .apropos .text { font-size:90%; }

#content .contact p.lien { display: inline; line-height:20px; }
#content .contact p.lien a { display: inline; font-size:100%; line-height:20px; }

#content .imprint  { font-size:90%; }

#footer { position:relative; margin-top:20px; z-index:0; }
#footer .lang_menu { font-size:90%; height:30px; display:table; margin:0 auto; }
#footer .lang_menu ul { list-style-type:none; margin:0; padding:0; }
#footer .lang_menu li { float:left;  }
#footer .lang_menu li a { display:inline; text-align:center; padding:16px; color:black; text-decoration:none; }
#footer .lang_menu li a:hover { color:gray; }
#footer .lang_menu li.curr a { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
#footer .imprint { font-size:90%; text-align:center; }
#footer .imprint a { text-decoration:none; }

.slideshow { display:none; position:fixed; top:20px; left:20px; width:0px; height:0px; border:1px; z-index:50; }
.slideshow .slide { display:flex; margin:auto; padding:0px; border:0px; justify-content:center; align-items:center; flex-direction:column; }
.slideshow .slide_title { position:absolute; left:0px; bottom:5px; }
.slideshow .controls { position:absolute; right:10px; bottom:30px; width:150px; }
.slideshow .controls .left_button { position:absolute; right:130px; }
.slideshow .controls .left_button img { width:30px; }
.slideshow .controls .play_button { position:absolute; right:90px; }
.slideshow .controls .play_button img { width:30px; }
.slideshow .controls .right_button { position:absolute; right:50px; }
.slideshow .controls .right_button img { width:30px; }
.slideshow .controls .close_button { position:absolute; right:10px; }
.slideshow .controls .close_button img { width:30px; }

@media only screen and (max-width:950px) {
  body { min-width:0px; }
  #header { height:auto; }
  #header .menu_button { display:inline; }
  #header .logo { display:block; width:25%; height:auto;  }
  #header #logo img { width:100%; height:auto; }
  #header .menu_button { display:inline; }
  #header .menu { display:none; padding-left:5px; padding-top:20px; }
  #header .menu ul { margin-top:5px; margin-bottom:5px; }
  #header .menu li { float:none; }
  #header .menu li a { display:block; font-size:larger; text-align:left; padding:0px; margin-bottom:20px; }
  #content .left { position:relative; width:auto; padding-bottom:20px; }
  #content .left hr { display:block; margin-bottom:10px; }
  #content .right { display:block; padding-left:0px; padding-bottom:20px; min-height:0px !important; }
  #content .proj { padding-right:10px; }
  #content .proj img { height:120px; }
  .slideshow .slide_title { position:absolute; left:0px; bottom:30px; }
  .slideshow .controls { bottom:60px; width:190px; }
  .slideshow .controls .left_button { right:160px; }
  .slideshow .controls .left_button img { width:40px; }
  .slideshow .controls .play_button { right:110px; }
  .slideshow .controls .play_button img { width:40px; }
  .slideshow .controls .right_button { right:60px; }
  .slideshow .controls .right_button img { width:40px; }
  .slideshow .controls .close_button { right:10px; }
  .slideshow .controls .close_button img { width:40px; }
}

@media only screen and (max-width:450px) {
  #content div.lien a { display:inline-block; font-size:85%; line-height:25px; }
  #content .proj { padding-right:5px; }
  #content .proj img { height:100px; }
  #content .proj p { font-size:2vw; }
  #footer { font-size:90%; }
  .slideshow .slide_title { font-size:80%; }
}