* {padding:0;margin:0; }

body{
background:#fff;
color:#000;
margin-bottom:50px;
font-size: 1em;
text-align: left;
font-family: Futura, futura-pt, 'Futura Std', 'Futura LT', 'Trebuchet MS', Arial, sans-serif;
letter-spacing: 1px;
}
.flexbin a {    opacity: 1;
    transition: opacity 1s ease-in-out;}
.flexbin a:hover {
  opacity: .4;
}

.fade1 {   
	animation: fadeIn ease 3s;  -webkit-animation: fadeIn ease 3s;  -moz-animation: fadeIn ease 3s;  -o-animation: fadeIn ease 3s;  -ms-animation: fadeIn ease 3s; 
}
.fade2 {   
    opacity: 0;	animation: fadeIn ease 3s;  -webkit-animation: fadeIn ease 3s;  -moz-animation: fadeIn ease 3s;  -o-animation: fadeIn ease 3s;  -ms-animation: fadeIn ease 3s;
	animation-delay: .5s;	     animation-fill-mode: forwards;
}
.fade3 {   
    opacity: 0;	animation: fadeIn ease 3s;  -webkit-animation: fadeIn ease 3s;  -moz-animation: fadeIn ease 3s;  -o-animation: fadeIn ease 3s;  -ms-animation: fadeIn ease 3s;
	animation-delay: 1s;	     animation-fill-mode: forwards;
}
.fade4 {   
    opacity: 0;	 	animation: fadeIn ease 3s;  -webkit-animation: fadeIn ease 3s;  -moz-animation: fadeIn ease 3s;  -o-animation: fadeIn ease 3s;  -ms-animation: fadeIn ease 3s;
	animation-delay: 1.5s;	     animation-fill-mode: forwards;
}
.fade4 {   
    opacity: 0; 	animation: fadeIn ease 3s;  -webkit-animation: fadeIn ease 3s;  -moz-animation: fadeIn ease 3s;  -o-animation: fadeIn ease 3s;  -ms-animation: fadeIn ease 3s;
	animation-delay: 2s;	     animation-fill-mode: forwards;
}
.fade5 {   
    opacity: 0; 	animation: fadeIn ease 3s;  -webkit-animation: fadeIn ease 3s;  -moz-animation: fadeIn ease 3s;  -o-animation: fadeIn ease 3s;  -ms-animation: fadeIn ease 3s;
	animation-delay: 2.5s;	     animation-fill-mode: forwards;
}

.flexbin {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  margin: -12px; }
  .flexbin:after {
    content: '';
    flex-grow: 999999999;
    min-width: 300px;
    height: 0; }
  .flexbin > * {
    position: relative;
    display: block;
    height: 380px;
    margin: 12px;
    flex-grow: 1; }
    .flexbin > * > img {
      height: 380px;
      object-fit: cover;
      max-width: 100%;
      min-width: 100%;
      vertical-align: bottom; }
  .flexbin.flexbin-margin {
    margin: 12px; }
  @media (max-width: 980px) {
    .flexbin {
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      margin: -12px; }
      .flexbin:after {
        content: '';
        flex-grow: 999999999;
        min-width: 150px;
        height: 0; }
      .flexbin > * {
        position: relative;
        display: block;
        height: 150px;
        margin: 12px;
        flex-grow: 1; }
        .flexbin > * > img {
          height: 150px;
          object-fit: cover;
          max-width: 100%;
          min-width: 100%;
          vertical-align: bottom; }
      .flexbin.flexbin-margin {
        margin: 12px; } }
  @media (max-width: 400px) {
    .flexbin {
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      margin: -12px; }
      .flexbin:after {
        content: '';
        flex-grow: 999999999;
        min-width: 100px;
        height: 0; }
      .flexbin > * {
        position: relative;
        display: block;
        height: 100px;
        margin: 12px;
        flex-grow: 1; }
        .flexbin > * > img {
          height: 100px;
          object-fit: cover;
          max-width: 100%;
          min-width: 100%;
          vertical-align: bottom; }
      .flexbin.flexbin-margin {
margin: 12px; } }
.entry-title {
	display: none;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
}
.video-vert {
	position: relative;
	padding-bottom: 70%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
}
#videomain {margin: 0 auto; width:100%; max-width:1000px; text-align:center;}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-container2  {
position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}
.video-container2 iframe,  
.video-container2 object,  
.video-container2 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videomain {margin: 0 auto; width:100%; max-width:1000px; text-align:center;}

#joncontent {margin: 0 auto;margin-bottom:50px; padding-top:28px; width:100%; max-width:1400px; text-align:center;}
#joncontent img {padding-bottom:10px;}
img {border: none; max-width: 100%; }
a {color:#000; text-decoration: none; }

#blog-title { font-weight:normal; clear:none; display:inline; margin-right:20px;}
#blog-title a {font-size: 1.2rem; text-transform: uppercase; }
#blog-title a:hover {color:#fff; background:#000}

#nav { text-align: center; background:#fff; height:50px;  position: fixed; bottom: 0; width: 100%; z-index:999; border-top:  solid 1px #707070; font-weight:lighter;}
#nav ul {  height: 50px;clear:none; display:inline;  list-style: none;  text-align: center;  background-color: #FFF;}
#nav ul li {  display: inline; margin-right: .25em;  margin-left: .25em; }
#nav ul a {font-size: 1.2em;  padding-left:.5em; padding-right:.5em; padding-bottom: .1em;}
#nav a:hover{ color:#fff;background: #000; transition: 1s ease-in-out; }



.blackbgtitle, .blackbgmedia, .blackbgdesc {background: #fff;color: #999;}
.blackbgmedia, .blackbgdesc  { clear:none; font-size: 1em; margin: 0 auto;  line-height: 150%;  max-width:1000px; text-align:center; padding-bottom:10px; }
.blackbgtitle h2 {margin-top:20px; font-weight: normal; font-size: 1.5em; color: #000; letter-spacing: .2rem; line-height: 150%; }
.researchdesc, .workdesc  {color:#666; padding: 0 20px 50px 20px;  font-size: 1em; margin: 0 auto; line-height: 150%;  max-width:800px; text-align:center;   }
.picinfos {font-size:.8em; padding-bottom:25px; margin: 0 auto; color:#999; max-width:1000px; text-align:right;}
.picinfos a {color:#999; text-decoration: underline; text-decoration-color: #dddddd; font-style: italic;}
.picinfos a:hover {color:#666;}
.workdesc a {color:#6592b6;}
.workdesc a:hover {text-decoration:underline;}

.researchthings {max-width: 640px; width:100%; padding-bottom:12px; margin: 0 auto; clear:both; }
.researchthings img {clear:none; float:left; margin-right:20px; margin-top:15px;}
.researchthings h3 {font-weight: normal;width:300px; float:left;  font-size: 11px; color: #000;}
.researchthings h4 {color:#999; font-weight: normal; width:320px; float:left; font-size:11px; padding-bottom:10px; }
.researchthings p {width:300px; float:left; color:#666; font-size:10px; line-height:16px;}

.workthings {width: 250px; display:inline-block; height:220px; margin-left:5px; margin-right:5px;}
.workthings h3 {font-weight: normal;float:right;  font-size: .75rem; color: #000;}

#biocv {display:inline-block; margin: 0 auto; max-width:800px; padding-top: 10px; text-align: left; }
#biocv table {padding-top: 10px; font-size:12px; color: #888;}
.cvetc {font-size:11px;  font-style:italic;}
#biocv em {color: #999; }
.cvtitle {font-size:14px; letter-spacing: 3px; color:#333; line-height:30px;}
.cvname {font-size:12px; font-weight: bold; color:#999;}
.biop, .statement {text-align: justify; color:#666; font-size:14px; margin: 0 auto; padding: 5px; max-width: 600px; }
.biop a, .downloadcv a, .email a, .email2 a {color:#666; padding: 3px; }
.biop a:hover, .downloadcv a:hover, .email a:hover{ color:#fff; background: #000; }
.downloadcv {text-align: center; padding: 3px;}
#representation {overflow: hidden;   width: 100%;}
#social {margin: 0 auto;}
.email {margin: 40px 0;   float: left;   width: 50%;  height: 200px; line-height:2;}
.social {display: flex;  justify-content: center;  }
.social a {    opacity: .4;
    transition: opacity 1s ease-in-out;}
.social a:hover {
  opacity: 1;
}
.email2 {margin: 40px 0; color:#666; padding: 3px; line-height:2;}
.email2 a:hover {color:#fff; background: #000;}
h3 {color:#aaa; font-weight:normal; padding-bottom: 10px;}

  

.texts {display:inline-block; margin: 0 auto; padding-top:20px;  padding-bottom:50px; text-align:left; letter-spacing: 0px;}
.texts h2 {font-size: .9em; color: #666; padding-bottom: 10px; padding-top: 10px;  font-weight: normal;}
.texts li {list-style:none; font-size: 11px; color: #999; padding:5px;}
.texts a {letter-spacing: 1px; padding: 2px; font-size: 12px; margin-right:20px;}
.texts a:hover{ color:#fff; background: #000; }

.links {padding:40px}

.statement { padding-bottom:2em; }

.maininfo{color:#666; padding-top:15px;width: 390px; text-align:justify; clear:none; float:right;}
.links-page {font-size:11px; padding-left:15px;text-align:left;padding-top:15px;width:390px; clear:none; float:left;}
.links-page li{list-style:none;padding-bottom:7px;}
.links-page a {color:#666; padding: 2px;  }
.links-page a:hover {color:#fff; background: #000; }
.links-page h3 {padding-bottom:3px;}




@media screen and (max-width: 750px) {
#blog-title {display:none;}
#nav { text-align: center; background:#fff; height:40px;  position: fixed; bottom: 0; width: 100%; z-index:999; border-top:  solid 1px #707070; font-weight:lighter;}
#nav ul { height: 40px;clear:none; display:inline;  list-style: none;  text-align: center;  background-color: #FFF;}
#nav ul li {  display: inline; margin-right: .1em;  margin-left: .1em; }
.email { float: none; margin: 0 auto; height: auto; padding-bottom: 20px}
#nav ul a { font-size: 1.2em; padding-left:.2em; padding-right:.2em; padding-bottom: .1em;}
}


#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
    opacity: 0;	animation: fadeIn ease 4s;  -webkit-animation: fadeIn ease 4s;  -moz-animation: fadeIn ease 4s;  -o-animation: fadeIn ease 4s;  -ms-animation: fadeIn ease 4s;
	animation-delay: .2s;	     animation-fill-mode: forwards;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 20%;
}