/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ *//** What follows is the result of much research on cross-browser styling.* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,* Kroc Camen, and the H5BP dev community and team.*//* ==========================================================================Base styles: opinionated defaults========================================================================== */html,button,input,select,textarea {color: #222;}html {font-size: 1em;line-height: 1.4;}/** Remove text-shadow in selection highlight: h5bp.com/i* These selection rule sets have to be separate.* Customize the background color to match your design.*/::-moz-selection {background: #b3d4fc;text-shadow: none;}::selection {background: #b3d4fc;text-shadow: none;}/** A better looking default horizontal rule*/hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}/** Remove the gap between images, videos, audio and canvas and the bottom of* their containers: h5bp.com/i/440*/audio,canvas,img,video {vertical-align: middle;}/** Remove default fieldset styles.*/fieldset {border: 0;margin: 0;padding: 0;}/** Allow only vertical resizing of textareas.*/textarea {resize: vertical;}/* ==========================================================================Browse Happy prompt========================================================================== */.browsehappy {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}/* ==========================================================================Author's custom styles========================================================================== */



@media  only screen and (min-device-pixel-ratio: 2), 
        only screen and (min-resolution: 192dpi) {
    body{
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }            
}


/*icon font*/
@font-face {
    font-family: 'ico';
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.eot') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
[ico]{
    font-family: 'ico';
    speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
[ico]:before{
    display: inline-block;
}
[ico=back]:before{
    content:'\e602'
}
[ico=next]:before{
    content:'\e603';
}
[ico=add]:before{
    content:'\e608'
}
[ico=fb]:before{
    content:'\e607'
}
[ico=menu]:before{
    content:'\e609'
}
.no-select {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/*main*/
body,
html {
    height: 100%;
    width: 100%;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 1.5em;
    color: #4d4d4d;
    background: #faf9f7;
    margin: 0;
    padding: 0;
}
body {
    overflow-x: hidden;
    overflow-y: scroll
}
h1,
h2,
h3 {
    display: inline-block;
    width: 100%;
    font-weight: normal
}

h1{
    display: inline-block;
    width: 100%;
    font-size: 28px;
    font-size: 1.8rem;
    letter-spacing: .05em;
    margin: 2em 0 .5em 0;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box
}
h1:after{
    content:'';
    display: block;
    width: 2em;
    height: 4px;
    background: #98030A;
    -webkit-border-radius: 10em;
       -moz-border-radius: 10em;
            border-radius: 10em;
    margin: 1em auto
}
h1.nav{
    text-align: left;
    margin-bottom: 1em;
}
h1.nav:after{
    display: none
}
h1.nav span {
    padding: 0 .5em;
    cursor: pointer;
    opacity: .5;
    filter: alpha(opacity=50);
    font-size: .9em;
    vertical-align: bottom;
    position: relative;
    display: inline-block;
    padding: .5em 1em;
    -webkit-transition: -webkit-transform .2s ease-out;
       -moz-transition: -moz-transform .2s ease-out;
         -o-transition: -o-transform .2s ease-out;
            transition: transform .2s ease-out;
}
h1.nav span.active{
    color: #98030A;
    opacity: 1;
    filter: alpha(opacity=100);
    font-size: 1em;
    cursor: default;
    margin: -.1px 0 0 -8px;
    margin: -.1em 0 0 -.5em
}
h1.nav span.viewAll {
    position: absolute;
    width: 6em;
    right: 0;
    bottom: 0;
    font-size: 14px;
    font-size: .875rem;
    text-align: right;
    color: #98030A;
    margin-right: 1.5em;
    padding-right: 2em;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}
h1.nav span.viewAll:after{
    content:'';
    border-color: #98030A;
    border-style: solid;
    border-width: 1px 1px 0 0;
    font-size:11px;
    font-size: 11px;
    font-size: .7rem;
    width: 1em;
    height: 1em;
    line-height: 1em;
    display: inline-block;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
       -moz-transform-origin: center;
         -o-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scaleX(.8) rotate(45deg);
        -ms-transform: scaleX(.8) rotate(45deg);
       -moz-transform: scaleX(.8) rotate(45deg);
         -o-transform: scaleX(.8) rotate(45deg);
            transform: scaleX(.8) rotate(45deg);
    position: absolute;
    top: 50%;
    margin: -.5em 0 0 .5em;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
h1.nav span.viewAll:hover, 
h1.nav span:not(.active):hover{
    -webkit-transform: scale(.96);
        -ms-transform: scale(.96);
       -moz-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96)
}
h1.nav span.viewAll:hover:after{
    margin-left: 1em
}
h2{
    
}
h3 {
    font-size: 1em
}
ul,
ol,
li {
    margin: 0;
    padding: 0;
    list-style: none
}

/*fix safari text rendering issue when hover*/
p,
ul.eventList li > div, 
ul.listView li > div, 
ul.carouselNav li, 
h1.nav span,
h1.nav span:after
{
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0)
}
article {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding-top: 7em
}
section {
    width: 100%;
    position: relative;
    text-align: center;
    padding: 4rem 0 0 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
section:last-of-type, section:only-child{
    padding-bottom: 10rem
}
.atm {
    display: table;
}
.atm > * {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle
}
.cover{
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: cover;
      -o-background-size: cover;
         background-size: cover;
    background-color: #E1E0DE;
    position: relative
}
.cover.banner{
    width: 100%;
    padding-top: 33.333333%
}
.cover.emtpy {
    background-color: #F0EFED;
}
.cover.empty:after{
    content:'\e600';
    font-family: 'ico';
    font-size: 64px;
    font-size: 4rem;
    position: absolute;
    color: rgba(0,0,0,.1);
    display: block;
    width: 1em; 
    height: 1em;
    line-height: 1em;
    left: 50%; top: 50%;
    margin: -.5em;
}
/*header*/
header {
    position: fixed;
    height: 7em;
    top:0;
    width: 100%;
    background: #E1E0DE;
    z-index: 999
}
header ul > *{
    display: inline-block;
    vertical-align: bottom;
}
div.logo{
    display: inline-block;
    color: #98030A;
}
header div.logo{
    height: 4rem;
    position: relative;
    margin-left: 14vw;
}
div.logo:before, div.logo:after{
    content:'\e600';
    font-family: 'ico';
    position: absolute;
    right: 100%;
    top: 0;
    background: rgba(0,0,0,0);
    border-radius: 10em;
    text-align: center;
    cursor: pointer;
}
header ul div.logo:before{
    font-size: 136px;
    font-size: 8.5rem;
    margin-top: -3rem;
    width: 160px;
    width: 10rem;
    line-height: 160px;
    line-height: 10rem;
    -webkit-transition: -webkit-transform .2s ease-in-out, color .2s ease-in-out;
       -moz-transition:    -moz-transform .2s ease-in-out, color .2s ease-in-out;
         -o-transition:      -o-transform .2s ease-in-out, color .2s ease-in-out;
            transition:         transform .2s ease-in-out, color .2s ease-in-out;
}
header ul div.logo:after{
    top: 0;
    font-size: 54px;
    font-size: 3.4rem;
    width: 64px;
    width: 4rem;
    line-height: 64px;
    line-height: 4rem;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateY(1rem) scale(1.2);
        -ms-transform: translateY(1rem) scale(1.2);
       -moz-transform: translateY(1rem) scale(1.2);
         -o-transform: translateY(1rem) scale(1.2);
            transform: translateY(1rem) scale(1.2);
    -webkit-transition: -webkit-transform .32s .05s ease-out;
       -moz-transition:    -moz-transform .32s .05s ease-out;
         -o-transition:      -o-transform .32s .05s ease-out;
            transition:         transform .32s .05s ease-out
}
header ul div.logo:hover:before{
    -webkit-transform: scale(.98);
        -ms-transform: scale(.98);
       -moz-transform: scale(.98);
         -o-transform: scale(.98);
            transform: scale(.98);
    color: #8f0001;
}
header nav{
    font-size: 0;
    padding: 0 16px;
    padding: 0 1rem;
    position: absolute;
    background: #E1E0DE;
    top: 0;
    right: 0;
    line-height: 64px;
    line-height: 4rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box
}
header nav a{
    cursor: pointer;
    line-height: 1em;
    font-size: 11px;
    font-size: .7rem;
    display: inline-block;
    text-decoration: underline;
    color: #666;
    padding: 0 1em;
}
header nav a + a {
    border-left: #666 1px solid
}
header search{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: .8rem;
    margin-right: 1rem;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
}
header search input[type="search"],
header search input[type="search"]:hover,
header search input[type="search"]:focus{
  -webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
}

/*link*/
a[ng-href]:not([ng-href=""]){
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    color: #8e8e8d
}
a[ng-href]:not([ng-href=""]):after{
    content:'\e606';
    font-family: 'ico';
    color: #98030A;
    padding: 0 .5em;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    display: inline-block
}
a[ng-href^=mailto]{
    padding: 1em;
    margin: 0 1em;
}
ul.store a[ng-href^=mailto]{
    padding: 0;
    margin: 0;
}
div.researcher a[ng-href^=mailto]{
    padding: 0;
    margin: 0 0 0 1em;
}
a[ng-href^=mailto]:not([ng-href=""]):after{
    content:'\e605';
}
a[ng-href]:not([ng-href=""]):hover{
    color: #98030A;
}
a[ng-href]:not([ng-href=""]):hover:after{
    content:'\e606';
    -webkit-transform: scale(.96);
       -moz-transform: scale(.96);
        -ms-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96);
}
a[ng-href]:not([ng-href^=mailto]):hover:after{
    margin: 0 .5rem;
}
a[ng-href^=mailto]:not([ng-href=""]):hover:after{
    -webkit-transform: translateX(.5em);
       -moz-transform: translateX(.5em);
        -ms-transform: translateX(.5em);
         -o-transform: translateX(.5em);
            transform: translateX(.5em);
}



/*nav*/
ul.nav {
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0 16px;
    padding: 0 1rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
ul.nav li{
    display: inline-block;
    line-height: 48px;
    line-height: 3rem;
    font-size: 14px;
    font-size: .875rem;
    margin-top: 64px;
    margin-top: 4rem;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    padding: 0 1em;
}
ul.nav li:after{
    content: '';
    position: absolute;
    bottom:0;
    width: 50%;
    height: 3px;
    display: inline-block;
    background: #9A0000;
    left: 25%;
    -webkit-border-radius: 10em;
       -moz-border-radius: 10em;
            border-radius: 10em;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition:.2s ease-out;
       -moz-transition:.2s ease-out;
         -o-transition:.2s ease-out;
            transition:.2s ease-out;
    -webkit-transform: translateY(-2px) scale(.9);
       -moz-transform: translateY(-2px) scale(.9);
        -ms-transform: translateY(-2px) scale(.9);
         -o-transform: translateY(-2px) scale(.9);
            transform: translateY(-2px) scale(.9)
}
ul.nav li:hover:after{
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateY(0) scale(1);
       -moz-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
         -o-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1)
}
ul.nav search{
    float: right
}
h2 * {
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
h2.fixed{
    position: fixed;
    left: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 10%;
    top:0;
    padding-top: 144px;
    padding-top: 9rem;
    border-bottom: #FAF9F7 1px solid;
    z-index: 80;
    background: rgba(250,249,247,0.9);
    background: -moz-linear-gradient(left, rgba(250,249,247,0.9) 0%, rgba(250,249,247,1) 50%, rgba(250,249,247,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(250,249,247,0.9)), color-stop(50%, rgba(250,249,247,1)), color-stop(100%, rgba(250,249,247,1)));
    background: -webkit-linear-gradient(left, rgba(250,249,247,0.9) 0%, rgba(250,249,247,1) 50%, rgba(250,249,247,1) 100%);
    background: -o-linear-gradient(left, rgba(250,249,247,0.9) 0%, rgba(250,249,247,1) 50%, rgba(250,249,247,1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(250,249,247,0.9)), color-stop(50%, rgba(250,249,247,1)), to(rgba(250,249,247,1)));
    background: linear-gradient(to right, rgba(250,249,247,0.9) 0%, rgba(250,249,247,1) 50%, rgba(250,249,247,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf9f7', endColorstr='#faf9f7', GradientType=1 );
    -webkit-transition: -webkit-transform .2s ease-out;
       -moz-transition:    -moz-transform .2s ease-out;
         -o-transition:      -o-transform .2s ease-out;
            transition:         transform .2s ease-out;
}
h2.fixed.hide{
    opacity: 0;
    -webkit-transform: translateY(-.5em);
        -ms-transform: translateY(-.5em);
       -moz-transform: translateY(-.5em);
         -o-transform: translateY(-.5em);
            transform: translateY(-.5em);
}
h2 nav{
    float: right;;
    font-size: 14px;
    font-size: .9rem;
    display: table;
    width: 70%;
    text-align: right;
}
h2 nav span {
    display: inline-block;
    padding: 0 1.5em;
    line-height: 3em;
    cursor: pointer;
    vertical-align: bottom;
}
h2 nav search{
    margin-left: 1rem
}


/*search bar*/
search{
    line-height: 40px;
    line-height: 2.5rem;
    display: inline-block;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
search:before{
    content:'\e604';
    font-family: 'ico';
    font-size: 19px;
    font-size: 1.2rem;
    line-height: 40px;
    line-height: 2.5rem;
    display: inline-block;
    position: absolute;
    width: 1em;
    padding: 0 .5em;
    left: 0;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out
}
search input{
    z-index: 9;
    padding-left: 3.5em;
    -webkit-box-shadow: 0 2px 0 rgba(85,85,85,0);
       -moz-box-shadow: 0 2px 0 rgba(85,85,85,0);
            box-shadow: 0 2px 0 rgba(85,85,85,0);
    opacity: 0;
    filter: alpha(opacity=0);
    width: 0;
    -webkit-transition: .2s ease-in-out, width .3s ease-out;
       -moz-transition: .2s ease-in-out, width .3s ease-out;
         -o-transition: .2s ease-in-out, width .3s ease-out;
            transition: .2s ease-in-out, width .3s ease-out 
}

search input[type="search"]:hover,
search input[type="search"]:focus{
    opacity: 1;
    filter: alpha(opacity=100);
    width: 12em;
    -webkit-box-shadow: 0 2px 0 rgba(85,85,85,.5);
       -moz-box-shadow: 0 2px 0 rgba(85,85,85,.5);
            box-shadow: 0 2px 0 rgba(85,85,85,.5);
}
search input[type="search"]:focus{
    width: 20em;
    -webkit-box-shadow: 0 2px 0 rgba(85,85,85,1);
       -moz-box-shadow: 0 2px 0 rgba(85,85,85,1);
            box-shadow: 0 2px 0 rgba(85,85,85,1);
}


search:hover:before{
    transform: scale(1.1)
}
input,
input[type="search"]{
    line-height: 40px;
    line-height: 2.5rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border: none;
    outline: none; 
    background: none
}

input:focus{
    outline: none; 
}

/*nav-left*/
nav-left{
    position: relative;
    text-align: right;
/*    display: inline-block;*/
}
.col-nav{
    display: table
}
.col-nav > *, .col-nav > .col{
    display: table-cell;
}
ul.sideNav{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
/*    width: 100%;*/
    display: inline-block;
    line-height: 1.4em;
    font-size: 14px;
    font-size: .875rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
nav-left.offset ul.sideNav li:first-child{
    margin-top: 32px;
    margin-top: 2rem
}
nav-left.mSize{
    width: 20%;
}
nav-left.mSize + *{
    width: 80%;
}
nav-left.mSize + * pagination{
    padding-right: 10%;
    display: inline-block;
    width: 100%;
}
nav-left + *{
    padding: 0 8% 0 2%;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: inline-block;
    min-height: 200%;
    text-align: left
}
nav-left.sSize{
    width: 15%;
}
nav-left.sSize + *{
    width: 85%;
}
nav-left.sSize + * pagination{
    padding-right: 15%
}
nav-left + *{
    min-height: 500px
}

ul.sideNav li{
    text-align: right;
    cursor: pointer;
    width: 100%;
    padding: 1em 2em;
    padding-left: 5vw;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    -webkit-transition: -webkit-transform .2s ease-out;
       -moz-transition: -moz-transform .2s ease-out;
         -o-transition: -o-transform .2s ease-out;
            transition: transform .2s ease-out;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
    text-transform: capitalize;
}
ul.sideNav li:before{
    content:'\e603';
    font-family: 'ico';
    display: inline-block;
    position: absolute;
    right: 0;
    -webkit-transition: -webkit-transform .2s ease-out;
       -moz-transition: -moz-transform .2s ease-out;
         -o-transition: -o-transform .2s ease-out;
            transition: transform .2s ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateX(-.5rem);
       -moz-transform: translateX(-.5rem);
        -ms-transform: translateX(-.5rem);
         -o-transform: translateX(-.5rem);
            transform: translateX(-.5rem);
    -webkit-border-radius: 10em;
       -moz-border-radius: 10em;
            border-radius: 10em;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
ul.sideNav li:hover{
    -webkit-transform: translateX(.5rem);
       -moz-transform: translateX(.5rem);
        -ms-transform: translateX(.5rem);
         -o-transform: translateX(.5rem);
            transform: translateX(.5rem);
}
ul.sideNav:hover li{
    color: #979797;
    
}
ul.sideNav:hover li:hover{
    color: #98030A;
    opacity: .7;
    filter: alpha(opacity=70)
}
ul.sideNav li.active{
    color: #98030A;
}
ul.sideNav li.active:before{
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
}
ul.sideNav li.active:hover:before{
    -webkit-transform: translateX(-.5em);
       -moz-transform: translateX(-.5em);
        -ms-transform: translateX(-.5em);
         -o-transform: translateX(-.5em);
            transform: translateX(-.5em)
}
/*scrolling effect*/
body.scrolling header{
    height: 4em;
    -webkit-transition: .2s ease-in-out;
       -moz-transition: .2s ease-in-out;
         -o-transition: .2s ease-in-out;
            transition: .2s ease-in-out
}
body.scrolling header:after{
    content:'';
    height: 2px;
    width: 100%;
    position: absolute;
    top:100%;
    left: 0;
    background: #646057;
    opacity: .2;
    filter: alpha(opacity=20)
}
body.scrolling header ul div.logo:before{
    display: none
}
body.scrolling header ul div.logo:after{
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none
}
body.scrolling header ul div.logo:hover:after{
    color: #8f0001;
    -webkit-transform: scale(.96);
       -moz-transform: scale(.96);
        -ms-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96);
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out
}
body.scrolling header ul.nav li{
    margin: 0;
    line-height: 64px;
    line-height: 4rem;
    -webkit-transition: .1s ease-in-out;
       -moz-transition: .1s ease-in-out;
         -o-transition: .1s ease-in-out;
            transition: .1s ease-in-out;
}
body.scrolling nav-left ul.sideNav{
    margin-top: -4em;
    -webkit-transition: margin-top .2s ease-in-out;
       -moz-transition: margin-top .2s ease-in-out;
         -o-transition: margin-top .2s ease-in-out;
            transition: margin-top .2s ease-in-out
}
body.scrolling h2.fixed{
    padding-top: 80px;
    padding-top: 5rem;
    -webkit-transition: .1s ease-in-out;
       -moz-transition: .1s ease-in-out;
         -o-transition: .1s ease-in-out;
            transition: .1s ease-in-out
}
body.scrolling header search{
    opacity: 0;
    -webkit-transform: translateY(-.5em);
       -moz-transform: translateY(-.5em);
        -ms-transform: translateY(-.5em);
         -o-transform: translateY(-.5em);
            transform: translateY(-.5em)
}

/*carousel*/
section.carousel{
    font-size: 0;
    overflow: hidden;
    padding: 0;
    background: url('../images/stardust_@2X.png');
    -webkit-transition: 0 linear;
       -moz-transition: 0 linear;
         -o-transition: 0 linear;
            transition: 0 linear;
    -webkit-transition-property: background-position;
       -moz-transition-property: background-position;
         -o-transition-property: background-position;
            transition-property: background-position;
    
}
section.carousel.wide{
    height: 60vh;
    max-height: 460px;
    min-height: 420px;
}
section.carousel.wide ul.banner{
    width: 106.666vh;
    min-width: 747px
}
section.carousel > div{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    padding: 0;
    
}
section.carousel > div > *{
    display: inline-block;
    vertical-align: bottom;
}
section.carousel ul.banner {
    display: inline-block;
    height: 100%;
    position: relative;
}
section.carousel ul.banner:before, section.carousel ul.banner:after{
    content:'';
    z-index: 10;
    position: absolute;
    display: inline-block;
    width: 8px;
    width: .5rem;
    height: 100%;
    top:0; left: 0;
    background: rgb(225,224,222);
    background: -moz-linear-gradient(top,  rgba(225,224,222,1) 0%, rgba(250,249,247,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,224,222,1)), color-stop(100%,rgba(250,249,247,1)));
    background: -webkit-linear-gradient(top,  rgba(225,224,222,1) 0%,rgba(250,249,247,1) 100%);
    background: -o-linear-gradient(top,  rgba(225,224,222,1) 0%,rgba(250,249,247,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(225,224,222,1)), to(rgba(250,249,247,1)));
    background: -webkit-linear-gradient(top, rgba(225,224,222,1) 0%, rgba(250,249,247,1) 100%);
    background: -o-linear-gradient(top, rgba(225,224,222,1) 0%, rgba(250,249,247,1) 100%);
    background: linear-gradient(to bottom,  rgba(225,224,222,1) 0%,rgba(250,249,247,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e0de', endColorstr='#faf9f7',GradientType=0 );

}
section.carousel ul.banner:after{
    left:auto; 
    right: 0;
}

section.carousel ul.banner li {
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: opacity 0.4s;
}



section.carousel ul.banner li.active {
    opacity: 1;
}

section.carousel .banner [bg-image] {
    -moz-background-size: cover;
      -o-background-size: cover;
         background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
ul.carouselNav{
    display: inline-block;
    width: 30%;
    color: white;
    font-size: 14px;
    font-size: .875rem;
    text-align: left;
    line-height: 1.5em;
    margin-bottom: 32px;
    margin-bottom: 2rem;
    padding-left: 2rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
ul.carouselNav li{
    padding: 0 2em;
    white-space: normal;
    padding: 11px 24px 3px 8px;
    padding: .7rem 1.5rem .7rem .5rem;
    margin: 0 0;
    position: relative;
    -webkit-transition:.2s ease-out;
       -moz-transition:.2s ease-out;
         -o-transition:.2s ease-out;
            transition:.2s ease-out;
    cursor: pointer;
    line-height: 1.2em;
}
ul.carouselNav li span{
    display: inline-block;
    width: 100%;
    font-size: .7em;
}

ul.carouselNav li:after{
    content:'';
    background: #E1E0DE;
    width: 5px;
    position: absolute;
    right: 100%;
    height: 80%;
    opacity: 0;
    filter: alpha(opacity=0);
    top:10%;
    -webkit-transition:.2s ease-out;
       -moz-transition:.2s ease-out;
         -o-transition:.2s ease-out;
            transition:.2s ease-out;
    -webkit-transform: translateX(2px);
       -moz-transform: translateX(2px);
        -ms-transform: translateX(2px);
         -o-transform: translateX(2px);
            transform: translateX(2px)
}
ul.carouselNav li:hover:after, ul.carouselNav li.active:after{
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
}
ul.carouselNav li:hover, ul.carouselNav li.active{
    text-shadow: 0 0 20px rgba(0,0,0,.2);
    -webkit-transform: scale(1.01) translateX(-3px);
       -moz-transform: scale(1.01) translateX(-3px);
        -ms-transform: scale(1.01) translateX(-3px);
         -o-transform: scale(1.01) translateX(-3px);
            transform: scale(1.01) translateX(-3px)
}
ul.carouselNav:hover li:not(:hover){
    opacity: .5;
    filter: alpha(opacity=50)
}
ul.carouselNav:hover li:hover{
    opacity: 1;
    filter: alpha(opacity=100)
}



section > div {
    font-size: 0;
    display: inline-block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    padding: 0 8%;
    white-space: nowrap;
    width: 100%;
}
section > .col-nav{
    padding: 0;
}
section > div > *{
    white-space: normal;
    vertical-align: top
}
section p, section pre{
    text-align: justify;
    text-indent: 2.2em;
}
section h2{
    font-size: 24px;
    font-size: 1.5rem;
    text-align: left;
    line-height: 2em;
    display: inline-block;
    width: 100%;
    color: #444
}
section h3{
    margin:0;
    font-weight: bold;
    color: #444
}


/*column*/
section .col{
    display: inline-block;
    min-width: 80%;
    white-space: nowrap
}
section .col > *{
    display: inline-block;
    font-size: 14px;
    font-size: .875rem;
    text-align: left;
    white-space: normal;
    vertical-align: top;
    padding: 0 2%;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
section .col > :last-child{
    padding-right: 0
}
.col .col-15{
    width: 15%;
}
.col .col-85{
    width: 85%;
}
.col .col-20{
    width: 20%;
}
.col .col-80{
    width: 80%;
}
.col .col-25{
    width: 25%;
}
.col .col-75{
    width: 75%;
}
.col .col-30{
    width: 30%;
}
.col .col-70{
    width: 70%;
}
.col .col-35{
    width: 35%;
}
.col .col-40{
    width: 40%;
}
.col .col-60{
    width: 60%;
}
.col .col-50{
    width: 50%;
}
.col .col-100{
    width: 100%;
}

/*buttons*/
.btn{
    display: inline-block;
    width: auto;
    text-align: center;
    font-size: 16px;
    font-size: 1rem;
    padding: 1em 0;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    -webkit-border-radius: 10em;
       -moz-border-radius: 10em;
            border-radius: 10em;
    color: white;
    line-height: 48px;
    line-height: 3rem;
    background: #AB343A;
    padding: 0 3em;
    margin: 2em 0;
    cursor: pointer;
    position: relative
}
.btn:after{
    font-size: 14px;
    font-size: .875rem;
    display: inline-block;
}
.btn.next{
    padding: 0 3.5em 0 3em
}
.btn.next:after{
    content:'';
    border-color: white;
    border-style: solid;
    border-width: 1px 1px 0 0;
    font-size: 11px;
    font-size: .7rem;
    width: 1em;
    height: 1em;
    line-height: 1em;
    display: inline-block;
    -webkit-transform-origin: center;
       -moz-transform-origin: center;
        -ms-transform-origin: center;
         -o-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scaleX(.8) rotate(45deg);
       -moz-transform: scaleX(.8) rotate(45deg);
        -ms-transform: scaleX(.8) rotate(45deg);
         -o-transform: scaleX(.8) rotate(45deg);
            transform: scaleX(.8) rotate(45deg);
    position: absolute;
    top: 50%;
    margin: -.5em 0 0 1em
}

/*main content */
section.carousel ~ section{
    background: url('../images/bkg.jpg') repeat-y;
    -moz-background-size: 90% auto;
      -o-background-size: 90% auto;
         background-size: 90% auto;
    background-position: top;
}
section.mainContent .col > *{
    padding: 0;
    padding-right: 2%;
}
section.mainContent .col > :last-child{
    padding: 0
}
section.mainContent ul.eventList li{
    padding: 16px 12px;
    padding: 1rem .75rem
}
section.mainContent ul.eventList p{
    padding: 0 .5em
}
section.mainContent ul.eventList.news li{
    padding: .5em;
    cursor: pointer
}
section.mainContent ul.eventList.news li:first-child{
    margin-top: .5em
}
section.mainContent ul.eventList.news .name{
    font-size: 14px;
    font-size: .92rem;
    line-height: 22px;
    line-height: 1.4rem
}
section.mainContent ul.eventList.news .name span{
    font-size: 11px;
    font-size: .7rem
}
section.mainContent ul.publicatins.new {
    border:green 1px solid
}

/*news list*/
ul.listView.newsList {
    display: inline-block;
    width: 70%;
    min-width: 800px
}
ul.listView.newsList li{
    padding: 16px 0;
    padding: 1rem 0;
    border: none
}
ul.listView.newsList li > div{
    display: inline-block;
    vertical-align: top;
}
ul.listView.newsList li > div.cover{
    width: 33.333%;
    padding-top: 11.111%;
    cursor: pointer;
    opacity: .9;
    filter: alpha(opacity=90);
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    -webkit-filter: grayscale(.2);
       -moz-filter: grayscale(.2);
         -o-filter: grayscale(.2);
        -ms-filter: grayscale(.2);
            filter: grayscale(.2);
}
ul.listView.newsList li:hover > div.cover{
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(.96);
       -moz-transform: scale(.96);
        -ms-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96);
    -webkit-filter: grayscale(0);
       -moz-filter: grayscale(0);
         -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
            filter: grayscale(0);
}
    

ul.listView.newsList li > div.info{
    width: 66.666%;
    padding: 0 1.5em;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
ul.listView.newsList li div.name{
    cursor: pointer;
    line-height: 1.4em;
    padding: .5em 0 0 0
}



/*history time line*/

ul.timeLine{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    padding-top: 10%;
}
ul.timeLine li{
    position: relative;
    display: inline-block;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    padding: 0 0 72px 0;
    padding: 0 0 4.5rem 0;
    white-space: normal;
    cursor: default
}
ul.timeLine:before{
    content:'';
    position: absolute;
    width: 2px;
    height: 100%;
    top:0;
    background: rgba(99,98,103,0);
    background: -moz-linear-gradient(top, rgba(99,98,103,0) 0%, rgba(99,98,103,1) 5%, rgba(99,98,103,1) 75%, rgba(99,98,103,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(99,98,103,0)), color-stop(5%, rgba(99,98,103,1)), color-stop(75%, rgba(99,98,103,1)), color-stop(100%, rgba(99,98,103,0)));
    background: -webkit-linear-gradient(top, rgba(99,98,103,0) 0%, rgba(99,98,103,1) 5%, rgba(99,98,103,1) 75%, rgba(99,98,103,0) 100%);
    background: -o-linear-gradient(top, rgba(99,98,103,0) 0%, rgba(99,98,103,1) 5%, rgba(99,98,103,1) 75%, rgba(99,98,103,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(99,98,103,0)), color-stop(5%, rgba(99,98,103,1)), color-stop(75%, rgba(99,98,103,1)), to(rgba(99,98,103,0)));
    background: linear-gradient(to bottom, rgba(99,98,103,0) 0%, rgba(99,98,103,1) 5%, rgba(99,98,103,1) 75%, rgba(99,98,103,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636267', endColorstr='#636267', GradientType=0 );
}
ul.timeLine li > *{
    display: inline-block;
    line-height: 24px;
    line-height: 1.5rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
ul.timeLine li div{
    font-size: 14px;
    font-size: .875rem;
    margin: 0;
    padding-left: 3em;
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: auto;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
}
ul.timeLine li div:before{
    content:'';
    height: 1px;
    position: absolute;
    width: 12em;
    background: #636267;
    left: 0;
}
ul.timeLine li span{
    display: inline-block;
    -webkit-transition: .4s ease;
       -moz-transition: .4s ease;
         -o-transition: .4s ease;
            transition: .4s ease;
    -webkit-transform: translateX(-1em);
       -moz-transform: translateX(-1em);
        -ms-transform: translateX(-1em);
         -o-transform: translateX(-1em);
            transform: translateX(-1em);
    opacity: .5;
    filter: alpha(opacity=50)
}
ul.timeLine li span:first-child{
    font-size: 14px;
    font-size: .875rem;
    display: inline-block;
    position: absolute;
    bottom: 100%;
}
ul.timeLine li span:first-child:before,ul.timeLine li span:first-child:after{
    content:'';
    font-size: .8em;
    margin: 0 .3em;
}
ul.timeLine li span:first-child:after{
    content:'年';
}
ul.timeLine li span + span{
    margin: 8px;
    margin: .5rem;
}
ul.timeLine li:hover span, ul.timeLine li.hover span{
    -webkit-transform: translateX(.5em);
       -moz-transform: translateX(.5em);
        -ms-transform: translateX(.5em);
         -o-transform: translateX(.5em);
            transform: translateX(.5em);
    font-weight: bold;
    opacity: 1;
    filter: alpha(opacity=100)
}
section.about h2, section.about h3{
    display: block
}
section.about h2{
    margin: 3em 0 2em 0;
}
section.about h2:first-of-type{
    margin: 1em 0 2em 0;
}
section.about + section > h2{
    text-align: center;
    margin: 96px 0 48px 0;
    margin: 6rem 0 3rem 0;
}
section.about + section > h2:first-of-type{
    margin-top: 0;
}
section.about .videoWrap{
    display: inline-block;
    width: 60%;
    padding-top: 37.5%;
    position: relative;
    float: right;
    margin-bottom: 3rem
}
section.about .videoWrap:after{
    content:'';
    position: absolute;
    top: 100%;
    width: 92%;
    height: 4px;
    left: 4%;
    border-radius: 10em;
    background: #98030A;
    margin-top: .7rem;
}

section.about .videoWrap object{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
section.about .videoWrap object, section.about .videoWrap:after{
    -webkit-transform: translate(3rem, 1rem);
       -moz-transform: translate(3rem, 1rem);
        -ms-transform: translate(3rem, 1rem);
         -o-transform: translate(3rem, 1rem);
            transform: translate(3rem, 1rem);
}
div.director .cover{
    width: 100%;
    padding-top: 133.333333%;
    /*
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%);
     */
}
div.director div.info span{
    font-size: 14px;
    font-size: .875rem;
    display: block;
    padding: 0 .3em;
    line-height: 2em;
}
div.director h2 span{
    line-height: 1em;
}
div.director h2{
}
div.director div.info{
    padding: 16px 24px;
    padding: 1rem 1.5rem;
}
div.director div.info h2{
    margin: 0;
    margin-bottom: 48px;
    margin-bottom: 3rem;
}
div.director div.info h2 span{
    line-height: 1em;
}
div.director div.info h2 + div + h3{
    margin-top: 80px;
    margin-top: 5rem;
}
div.director div.info > div{
    padding-bottom: 1em
}
div.director div.info > div + div{
    border-top: #dedddb 1px solid;
    padding-top: 1em
}
div.director div.info span{
    line-height: 1.4em;
    margin: .7em 0
}
div.director div.info span b{
    margin-right: .5em;
    display: inline-block;
    min-width: 3em;
    letter-spacing: 0;
}






ul.listView{
    width: 100%;
    display: inline-block;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    text-align: left;
    font-size: 0;
}
ul.listView li{
    line-height: 64px;
    line-height: 4rem;
    font-size: 0;
    text-align: left;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 0 0 24px;
    padding: 0 0 0 1.5rem;
    trasnition: .2s ease-out;
    border-top: #DEDDDB 1px solid
}
ul.listView li:first-of-type{
    border-top: none
}
ul.listView li > div{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    line-height: 1.5em;
    font-size: 14px;
    font-size: .875rem
}


/*list view content*/
.name{
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.2em ;
    color: #333;
}
.name span{
    display: block;
    font-size: .8em;
}
.name span:first-child{
    margin-bottom: 1em;
}
.name span:last-child{
    font-size: .7em
}

/*committee*/
ul.committee li{
    width: 49%;
    display: inline-block;
    white-space: nowrap;
    border-top: none;
    border-bottom: #DEDDDB 1px solid
}
ul.committee li > div{
    font-size: 14px;
    font-size: .875rem;
    white-space: normal;
    padding: 0;
}
ul.committee li > div:first-child{
    width: 33.333%;
    font-size: 16px;
    font-size: 1rem
}
ul.committee li > div + div{
    width: 66.666%
}
ul.committee span, ul.directors span{
    display: block;
    font-size: 11px;
    font-size: .7rem;
    line-height: 1.3em
}
ul.directors li > div:first-child{
    font-size: 16px;
    font-size: 1rem;
    width: 20%
}
ul.directors li > div:first-child + div{
    font-size: 14px;
    font-size: .875rem;
    width: 20%;
    text-align: center
}
ul.directors li > div:nth-child(3){
    float: right;
    font-size: 11px;
    font-size: .7rem;
    line-height: 64px;
    line-height: 4rem
}

/*researchers list*/
ul.researchers{
    padding: 0;
    position: relative;
    padding-top: 1rem
}
ul.researchers li{
    display: inline-block;
    width: 50%;
    padding: 0;
    border-color: transparent;
    cursor: pointer;
    white-space: nowrap
}

ul.researchers.default_mode ul:first-of-type li:first-of-type {
  margin-right: 50%;
}

ul.researchers li .cover {
    width: 25%;
    padding-top: 33.333333%;
}
ul.researchers .name{
    font-size: 16px;
    font-size: 1rem
}
ul.researchers li > div{
    font-size: 0;
    white-space: normal
}
ul.researchers li > div + div {
    padding: 0 24px;
    padding: 0 1.5rem;
    width: 75%;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box
}
ul.researchers li > div > div + div{
    margin-top: 1.5em;
    font-size: 14px;
    font-size: .875rem;
    line-height: 1.3em;
}



/*list*/
ul.researchers.list{
    padding: 32px 0;
    padding: 2rem 0
}
ul.researchers.list li{
    width: 100%;
    border-color: #DEDDDB;
    white-space: nowrap;
    padding: 0 8px;
    padding: 0 .5rem;
}
ul.researchers.list li .cover,
ul.researchers.list li.vip .cover{
    width: 80px;
    width: 5rem;
    height: 80px;
    height: 5rem;
    padding: 0;
    margin: 8px 0;
    margin: .5rem 0;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
}
ul.researchers.list li > div + div{
    line-height: 96px;
    line-height: 6rem;
}
ul.researchers.list li > div > div{
    width: 30%;
    display: inline-block;
    margin: 0;
    vertical-align: middle
} 
ul.researchers.list li > div > div + div{
    width: 70%;
    white-space: normal
}
ul.researchers.list li > div > div span{
    margin: .5em 0
}
ul.researchers.list li:hover .cover{
    -webkit-transform: scale(1.05);
       -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
         -o-transform: scale(1.05);
            transform: scale(1.05)
}


/*hover*/
ul.researchers li .cover{
    margin: 16px 0;
    margin: 1rem 0;
    -webkit-transition: filter .2s .1s ease-out,
        -webkit-filter .2s .1s ease-out;
            transition: filter .2s .1s ease-out,
        -webkit-filter .2s .1s ease-out;
  /*
    -webkit-filter: grayscale(95%);
       -moz-filter: grayscale(95%);
         -o-filter: grayscale(95%);
        -ms-filter: grayscale(95%);
            filter: grayscale(95%);
  */
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
ul.researchers li:hover .cover{
  /*
    -webkit-filter: grayscale(5%);
       -moz-filter: grayscale(5%);
         -o-filter: grayscale(5%);
        -ms-filter: grayscale(5%);
            filter: grayscale(5%);
  */
}


/*vip*/
ul.researchers li.vip{
    width: 100%;
}
ul.researchers li.vip{
    vertical-align: middle
}
ul.researchers li.vip .cover {
    width: 20%;
    padding-top: 26.666666%;
}
ul.researchers li.vip .cover + div{
    width: 30%;
}
ul.researchers li.vip .cover + div + div{
    width: 50%
}
ul.researchers li.vip .timeList > div{
    margin:0;
    line-height: 2em;
}

/*researchers ＆ book detail*/
div.detail{
    font-size: 0;
}
div.detail div{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
div.detail .cover{
    width: 100%;
    padding-top: 120%;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out
}
div.detail .timeList{
    margin-top: 3em
}
div.detail .name{
    font-size: 24px;
    font-size: 1.5rem;
    margin: 8% 0 5% 0;
    color: #333
}
div.detail .name span{
    font-size: 14px;
    font-size: .875rem
}
div.detail .name a{
    font-size: .8rem;
}
div.detail .awards{
    margin: 2em 0 3em 0;
}
div.detail .awards div{
    padding-left: 2%;
    margin-left: 2%;
    border-left: #960612 3px solid
}
/*
div.detail.researcher .cover{
    -webkit-filter: grayscale(95%);
       -moz-filter: grayscale(95%);
         -o-filter: grayscale(95%);
        -ms-filter: grayscale(95%);
            filter: grayscale(95%);
}
*/
div.publication .cover{
    -moz-background-size: contain;
      -o-background-size: contain;
         background-size: contain
}
div.detail.researcher .cover:hover{
    -webkit-filter: grayscale(0);
       -moz-filter: grayscale(0);
         -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
            filter: grayscale(0);
}

ol.index h3{
    line-height: 1.2em;
    margin: 1.5em 0 .5em 0;
    padding: 0 .5em;
    border-left: #960612 3px solid
}
ol.index h3 i{
    display: inline-block;
    padding: 0 .5em;
    color: #9F9F9E;
    font-weight: normal;
    font-size: .875em;
    letter-spacing: 0;
}
ol.index ol{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding-left: 1.5em; 
    counter-reset: li;
}
ol.index ol li {
    line-height: 1.4em;
    padding: .5em 0;
    position: relative;
    text-align: justify;
}

ol.index ol li > div.article {
    line-height: 1.4em;
    position: relative;
    text-align: justify;
    padding: 0 0 0.5em 0;
}
/*
div.publication ol.index ol li {
    white-space: nowrap;
}
*/
ol.index ol li:before{
    content: counter(li) '.';
    counter-increment: li;
    display: inline-block;
    position: absolute;
    right: 100%;
    font-size: .875em;
    letter-spacing: 0;
    margin-right: .5em
}
ol.index ol li i{
    display: inline-block;
    float: right;
    font-size: .8em;
    text-align: center;
    width: 6em;
    margin: 0 -3em 1em 1.5em;
}
ol.index ol li a[ng-href]{
    display: inline-block
}


div.publication{
    min-height: 600px
}
div.publication div.info{
    padding: 2em 1em
}
div.publication div.info span{
    display: inline-block;
    width: 100%;
    font-size: .9em
}
div.publication div.info span b{
    min-width: 10em;
    width: 40%;
    display: inline-block;
    font-weight: normal
}
div.publication div.header {
    position: relative;
}
div.publication div.header i {
    font-size: 14px;
    font-size: .875rem;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    font-style: normal;
    color: #98030A;
}
div.publication ol.index > li{
    padding-right: 4rem;
}
div.publication ol.index li i{
    position: absolute;
    left: 100%; 
    top: 0;
    margin: .5em 0;
}



/* awards & cv*/
.timeList{
    position: relative;
    line-height: 4em;
}
.timeList > div > b{
    display: block;
    margin-right: .7em;
    font-size: 1.1em;
    line-height: 1.5em
}
.timeList > div{
    display: inline-block;
    width: 100%;
    line-height: 1.2em
}

/*staff*/
ul.staff .name{
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5em;
    width: 25%;
}
ul.staff .name span{
    margin: 0;
    font-size: 14px;
    font-size: .875rem
}
ul.staff .name + div{
    text-align: center;
    width: 25%;
}
ul.staff div:last-child{
    line-height: 64px;
    line-height: 4rem;
    float: right
}
ul.staff span[ico]{
    display: inline-block;
    line-height: 48px;
    line-height: 3rem;
    width: 48px;
    width: 3rem;
    font-size: .8em;
    letter-spacing: 0;
    text-align: center;
    -webkit-border-radius: 10em;
       -moz-border-radius: 10em;
            border-radius: 10em;
}
ul.staff span[ico]:before{
    font-size: 16px;
    font-size: 1rem;
    vertical-align: middle;
}

/* People: including visitors, phd-candidates & post-docs */

ul.people li > div {
    width: 33%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
ul.people .name{
    font-size: 16px;
    font-size: 1rem;
    line-height: 2em;
}
ul.people .name span{
    display: inline-block;
    font-size: .8em;
    margin:0;
    line-height: 1em;
}
ul.people .name span + span{
    display: block;
    line-height: 1.2em;
}
ul.people .name + div{
    padding: 0 0 0 1.5em;
}
ul.people li div:last-child{
    float: right;
    line-height: 64px;
    line-height: 4rem;
    text-align: center;
}
ul.people li div:last-child span{
    line-height: 1.5em;
    display: inline-block;
    vertical-align: middle;
}
ul.people div:last-child span span{
    display: block;
}



ul.publications {
    font-size: 0;
    display: inline-block;
    width: 100%;
    position: relative;
    padding-top: 2rem
}
ul.publications li{
    width: 16.666%;
    display: inline-block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 6px;
    padding: 0 .4rem;
    position: relative;
    cursor: pointer;
    vertical-align: top;
    margin-bottom: 8px;
    margin-bottom: .5rem;
    
}
ul.publications li > div{
    display: inline-block;
    width: 100%;
}
/*cover's container*/
ul.publications li > div:first-child{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border: rgba(240,239,237,1) 8px solid;
    border: rgba(240,239,237,1) .5rem solid;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
}
ul.publications li:hover > div:first-child{
    border-color: rgba(240,239,237,0)
}
ul.publications li:hover .cover{
    -webkit-transform: scale(1.15);
       -moz-transform: scale(1.15);
        -ms-transform: scale(1.15);
         -o-transform: scale(1.15);
            transform: scale(1.15);
    background-color: #E1E1DF;
}
ul.publications .cover{
    padding-top: 100%;
    width: 100%; 
    background-color: #F0EFED;
    -moz-background-size: auto 100%;
      -o-background-size: auto 100%;
         background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
ul.publications li div.info{
    font-size: 14px;
    font-size: .875rem;
    padding: .5em 1em;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box
}
ul.publications li div.info span{
    display: block;
    text-align: left;
    line-height: 1.4em;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
ul.publications li div.name{
    font-weight: bold;
    width: 100%;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    text-align: left;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
ul.publications li div.name span{
    font-weight: normal;
    font-size: .8em;
    -webkit-transition: .3s ease-out;
       -moz-transition: .3s ease-out;
         -o-transition: .3s ease-out;
            transition: .3s ease-out;
    margin: .5em 0
}

ul.publications li div.info span span{
    display: inline-block;
    width: 100%;
    text-align: right;
    padding: 0;
}
ul.publications div.price{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: .875em;
    margin: 1em 2em;
    font-weight: bold
}
ul.publications div.price s{
    text-decoration: none;
    font-weight: bold;
    padding: 0 .5em;
}
ul.publications .controls{
    text-align: right;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
ul.publications .controls span{
    font-size: 16px;
    font-size: 1rem;
    display: inline-block;
    line-height: 48px;
    line-height: 3rem;
    padding: 0 24px;
    padding: 0 1.5rem;
    cursor: pointer;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out
}
ul.publications .controls span:hover {
    -webkit-transform: scale(.94) translateX(-2px);
       -moz-transform: scale(.94) translateX(-2px);
        -ms-transform: scale(.94) translateX(-2px);
         -o-transform: scale(.94) translateX(-2px);
            transform: scale(.94) translateX(-2px);
}
ul.publications .controls span + span:hover {
    -webkit-transform: scale(.94) translateX(2px);
       -moz-transform: scale(.94) translateX(2px);
        -ms-transform: scale(.94) translateX(2px);
         -o-transform: scale(.94) translateX(2px);
            transform: scale(.94) translateX(2px)
}
ul.publications nav span:before{
    display: inline-block;
    font-family: 'ico';
    content:'\e601';
    padding: 0 .3em;
    -webkit-transform: translateX(-3px);
       -moz-transform: translateX(-3px);
        -ms-transform: translateX(-3px);
         -o-transform: translateX(-3px);
            transform: translateX(-3px);
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
}
ul.publications nav span:hover{
    color: #9A0000
    
}
ul.publications nav span:hover:before{
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    filter: alpha(opacity=100);
}
div.latest-publications .ctrler{
    position: absolute;
    height: 71%;
    top: 0;
    right: 100%;
    width: 9%;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    -webkit-transform: translateX(.5rem);
       -moz-transform: translateX(.5rem);
        -ms-transform: translateX(.5rem);
         -o-transform: translateX(.5rem);
            transform: translateX(.5rem);
    text-align: center;
    cursor: pointer;
}
div.latest-publications .ctrler + .ctrler{
    left: 100%;
    right: auto;
    -webkit-transform: translateX(-.5rem);
       -moz-transform: translateX(-.5rem);
        -ms-transform: translateX(-.5rem);
         -o-transform: translateX(-.5rem);
            transform: translateX(-.5rem)
}
div.latest-publications .ctrler:after{
    -webkit-border-radius: 0 3px;
       -moz-border-radius: 0 3px;
            border-radius: 0 3px;
    content:'';
    border-color: #4D4D4D;
    border-style: solid;
    border-width: 0 0 2px 2px;
    font-size: 24px;
    font-size: 1.5rem;
    width: 1em;
    height: 1em;
    line-height: 1em;
    display: inline-block;
    -webkit-transform-origin: center;
       -moz-transform-origin: center;
        -ms-transform-origin: center;
         -o-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scaleX(.8) rotate(45deg);
       -moz-transform: scaleX(.8) rotate(45deg);
        -ms-transform: scaleX(.8) rotate(45deg);
         -o-transform: scaleX(.8) rotate(45deg);
            transform: scaleX(.8) rotate(45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -.5em;
}
div.latest-publications .ctrler + .ctrler:after{
    border-width: 2px 2px 0 0;
}
div.latest-publications:hover .ctrler{
    opacity: .3;
    filter: alpha(opacity=30);
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0)
}
div.latest-publications:hover .ctrler:hover{
    opacity: .8;
    filter: alpha(opacity=80);
    -webkit-transform: scale(1.05) translateX(-.5rem);
       -moz-transform: scale(1.05) translateX(-.5rem);
        -ms-transform: scale(1.05) translateX(-.5rem);
         -o-transform: scale(1.05) translateX(-.5rem);
            transform: scale(1.05) translateX(-.5rem)
}
div.latest-publications:hover .ctrler + .ctrler:hover{
    -webkit-transform: scale(1.05) translateX(.5rem);
       -moz-transform: scale(1.05) translateX(.5rem);
        -ms-transform: scale(1.05) translateX(.5rem);
         -o-transform: scale(1.05) translateX(.5rem);
            transform: scale(1.05) translateX(.5rem)
}

div.latest-publications {
  position: relative;
}

div.latest-publications > div {
  overflow: hidden;
    padding: 8px 0;
    padding: .5rem 0;
    -webkit-font-smoothing: antialiased;
}

div.latest-publications ul.publications {
  white-space: nowrap;
  -webkit-transition: 0.3s linear;
     -moz-transition: 0.3s linear;
       -o-transition: 0.3s linear;
          transition: 0.3s linear;
}

div.latest-publications ul.publications > *{
  white-space: normal;
}


ul.publications.new li:hover div.name{
    -webkit-transform: translateY(.5em);
       -moz-transform: translateY(.5em);
        -ms-transform: translateY(.5em);
         -o-transform: translateY(.5em);
            transform: translateY(.5em)
}
ul.publications.new li:last-child p{
    font-size: .8em
}
ul.publications.new li div.name{
    font-weight: normal
}
ul.publications.new li:hover div.name span{
    -webkit-transform: translateY(.2em);
       -moz-transform: translateY(.2em);
        -ms-transform: translateY(.2em);
         -o-transform: translateY(.2em);
            transform: translateY(.2em);
}





ul.publications.gridView li{
    width: 50%;
    margin-bottom: 48px;
    margin-bottom: 3rem;
    white-space: nowrap
}
ul.publications.gridView li:nth-last-child(-n+2){
    margin: 16px 0;
    margin: 1rem 0
}
ul.publications.gridView li > div{
    display: inline-block;
    width: 66.666666%;
    vertical-align: top;
    white-space: normal
}
ul.publications.gridView li > div:first-child{
    width: 33.333333%;
}
ul.publications.gridView div.name{
    font-size: 1.1em;
    line-height: 1.3em;
    margin-top: 1em;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out
}
ul.publications.gridView div.name span{
    font-size: .8em;
    margin: 1em 0
}
ul.publications.gridView p{
    font-size: 12px;
    font-size: .8rem;
    padding: .5em 1.5em;
    position: absolute;
}
ul.publications.gridView li p{
    white-space: normal
}
ul.publications.gridView li:hover .name{
    -webkit-transform: translateX(1em);
       -moz-transform: translateX(1em);
        -ms-transform: translateX(1em);
         -o-transform: translateX(1em);
            transform: translateX(1em);
}
ul.store li{
    width: 50%;
    display: inline-block;
    border: none;
    line-height: 40px;
    line-height: 2.5rem;
    padding: 8px 16px;
    padding: .5rem 1rem
}
ul.store li + li + li{
    border-top: #DEDDDB 1px solid;
}
ul.store li div:first-child{
    font-size: 16px;
    font-size: 1rem;
    width: 100%;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out
}
ul.store li div:last-child{
    height: 48px;
    height: 3rem;
    padding: 0 .2em
}
ul.store li div:last-child span{
    margin-right: .7em;
    word-break: break-all
}
ul.store li div:last-child span + span{
    font-size: .95em
}
ul.store li div:last-child span:before{
    margin-right: .5em
}

div.infoDl{
    font-size: 14px;
    font-size: .875rem
}
div.infoDl *{
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
div.infoDl a{
    display: inline-block;
    line-height: 3em;
    padding: 0 1.5em;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out
}
div.infoDl a:hover{
    padding: 0 2em 0 1em
}
div.infoDl a + a:hover{
    padding: 0 1em 0 2em
}


ul.eventList li{
    width: 100%;
    display: inline-block;
    border: none;
    vertical-align: top;
    padding: 8px 24px;
    padding: .5rem 1.5rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box
}
ul.eventList li > div{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 .5em
}
ul.eventList .cover{
    width: 30%;
    padding-top: 10%;
}
ul.eventList .info{
    width: 70%;
    padding: 16px 8px 16px 24px;
    padding: 1rem .5rem 1rem 1.5rem;
    cursor: pointer
}
ul.eventList .info > div{
    display: inline-block;
    width: 100%;
    color: #333
}
ul.eventList .info > div span{
    display: inline-block;
    color: #444
}
ul.eventList .info > div:first-child{
    line-height: 1.5em;
    font-size: 16px;
    font-size: 1rem;
}
ul.eventList .info > div:first-child span:first-child{
    float: right;
    font-size: .875em;
    margin: 0 0 .5em 1.5em;
    line-height: 1.6em;
    text-align: right;
    max-width: 60%;
    min-width: 30%;
}
ul.eventList .info > div:first-child span:last-child{
    display: block;
    font-size: .7em
}
ul.eventList .info > div:first-child + div{
    font-size: .8em;
}
ul.eventList li p{
    font-size: 12px;
    font-size: .8rem;
    line-height: 2em;
    margin: 0;   
}
ul.eventList li .cover {
  cursor: pointer;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -webkit-transition: opacity .3s, -webkit-transform .2s ease-out;
     -moz-transition: opacity .3s, -moz-transform .2s ease-out;
       -o-transition: opacity .3s, -o-transform .2s ease-out;
          transition: opacity .3s, transform .2s ease-out;
}
ul.eventList li:hover .cover {
  opacity: 1;
  filter: alpha(opacity=100);
    -webkit-transform: scale(.98);
       -moz-transform: scale(.98);
        -ms-transform: scale(.98);
         -o-transform: scale(.98);
            transform: scale(.98)
}





ul.eventList li.grid{
    width: 50%;
    padding: 16px 24px;
    padding: 1rem 1.5rem;
}
ul.eventList li.grid + li:not(.grid){
    margin-top: 16px;
    margin-top: 1rem
}
ul.eventList li:nth-child(-n+2){
    padding-top: 0;
}
ul.eventList li.grid .cover{
    padding-top: 33%;
}
ul.eventList li.grid > div{
    width: 100%;  
}
ul.eventList li.grid .info{
    padding: 16px 8px;
    padding: 1rem .5rem;
}
ul.eventList li.grid .info > div:first-child span:first-child{
    white-space: pre-line
}





div.load-more {
    font-size: 14px;
    font-size: .875rem;
    text-align: center;
    padding: 4em 0 0 0;
}
div.load-more span {
    border: transparent 1px solid;
    line-height: 3em;
    width: 30%;
    display: inline-block;
    -webkit-border-radius: 10em;
       -moz-border-radius: 10em;
            border-radius: 10em;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    cursor: pointer;
    background: #f0efed;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
div.load-more span:hover {
    border: #C57275 1px solid;
    color: #98030A;
    -webkit-transform: scale(.96);
       -moz-transform: scale(.96);
        -ms-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96);
    background: none
}



div.eventDetail > div{
    padding-right: 20%;
    text-align: left;
    font-size: 14px;
    font-size: .875rem
}
div.eventDetail .cover{
    opacity: .9;
    filter: alpha(opacity=90)
}
div.eventDetail .cover ~ div{
    padding-left: 8px;
    padding-left: .5rem
}
div.eventDetail .info{
    padding: 32px 0 16px 16px;
    padding: 2rem 0 1rem 1rem;
}
div.eventDetail .info > .name {
    position: relative;
    line-height: 1.4em
}
div.eventDetail .info > .name + .name{
    line-height: 1.6em;
    padding: 0 1.5em;
    margin: 32px 0;
    margin: 2rem 0
}
div.eventDetail .info > .name + .name:before{
    content:'';
    position: absolute;
    width: 3px;
    height: 100%;
    left: .5em;
    background: #960612;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
div.eventDetail .info > .name h4{
    margin: 0;
    color: #989897;
    font-size: 14px;
    font-size: .875rem
}
div.eventDetail .info > .name span{
    font-size: 12px;
    font-size: .8rem
}
div.eventDetail .info > .name s{
    text-decoration: none;
    font-size: 12px;
    font-size: .8rem;
    color: #989897;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    display: inline-block;
    padding: .5em 1.5em;
    margin: 0 1.5em;
    cursor: pointer
}
div.eventDetail .info > .name s:hover{
    color: #960612;
    -webkit-transform: scale(.96);
       -moz-transform: scale(.96);
        -ms-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96)
}
div.eventDetail .info > .name > div.social{
    float: right;
    position: relative;
    margin-left: 2em
}
div.eventDetail .info > .name > div.social span{
    margin: 0;
    padding: 0 16px;
    padding: 0 1rem;
}
div.social{
    text-align: center;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1em;
    display: inline-block;
}
div.social span{
    font-size: .8em;
    position: relative;
    cursor: pointer;
    line-height: 2.5em;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    color: #8e8e8d
}
div.social span:hover{
    -webkit-transform: scale(.96);
       -moz-transform: scale(.96);
        -ms-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96);
}
div.social span:before{
    right: 100%;
    position: absolute;
    -webkit-transform: translateX(-.5em);
       -moz-transform: translateX(-.5em);
        -ms-transform: translateX(-.5em);
         -o-transform: translateX(-.5em);
            transform: translateX(-.5em);
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    opacity: 0;
    filter: alpha(opacity=0)
}
div.social span:hover:before{
    -webkit-transform: translate(0);
       -moz-transform: translate(0);
        -ms-transform: translate(0);
         -o-transform: translate(0);
            transform: translate(0);
    opacity: 1;
    filter: alpha(opacity=100)
}
div.social span[ico=fb]:before, div.social span[ico=fb]:hover{
    color: #49649D
}
div.social span[ico=add]:before, div.social span[ico=add]:hover{
    color: #98030A
}
div.eventDetail .info > div:first-child{
    font-size: 20px;
    font-size: 1.3rem;
}
div.eventDetail .info > div:first-child span{
    padding: 0 .2em
}
div.eventDetail .info > div:first-child span:not(:first-of-type) {
    line-height: 1.2em;
}
div.eventDetail img{
    max-width: 40%;
    max-height: 300px;
    float: right;
    clear: both;
    margin: -16px -24px 32px 72px;
    margin: -1rem -1.5rem 2rem 4.5rem;
    display: inline-block;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    opacity: .9;
    filter: alpha(opacity=90);
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-filter: grayscale(10%);
       -moz-filter: grayscale(10%);
         -o-filter: grayscale(10%);
        -ms-filter: grayscale(10%);
            filter: grayscale(10%);
}
div.eventDetail img:hover{
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(.96);
       -moz-transform: scale(.96);
        -ms-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96);
    -webkit-filter: grayscale(0);
       -moz-filter: grayscale(0);
         -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
            filter: grayscale(0);
}
div.eventDetail p {
    max-width: 80%;
}
div.eventDetail div.attachment{
    margin-top: 3em;
}
div.eventDetail a{
    line-height: 2.5em;
    display: block;
}
div.eventDetail .videoWrap{
    display: inline-block;
    position: relative;
    width: 100%;
    padding-top: 33.75%;
    margin: 32px 0;
    margin: 2rem 0;
    clear: both
}
div.eventDetail .videoWrap object{
    position: absolute;
    width: 60%;
    min-width: 400px;
    left: 40%;
    margin-left: -30%;
    height: 100%;
    top:0;   
}
/*news*/
div.eventDetail.news div.content{
    padding-left: 24px;
    padding-left: 1.5rem
}



/*projects list*/
ul.projectsList .name{
    font-size: 16px;
    font-size: 1rem;
    max-width: 70%;
    line-height: 1.4em;
    margin: .5em 0
}
ul.projectsList .name span{
    font-size: 12px;
    font-size: .8rem;
    margin: 0;
    margin-top: .5em;
    line-height: 1.3em
}
ul.projectsList li > div:last-child{
    float: right;
    font-size: 12px;
    font-size: .8rem;
    line-height: 64px;
    line-height: 4rem;
    width: 25%;
    text-align: center
}
/*labs*/
ul.labs{
    width: 80%;
}
ul.labs li{
    padding: 16px;
    padding: 1rem;
    white-space: nowrap
}
ul.labs li > div{
    width: 33.333%;
    white-space: normal
}
ul.labs li > div + div{
    width: 66.666%;
    padding-left: 1.5em;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding-top: .5em
}
ul.labs li > div.name {
    font-size: 17px;
    font-size: 1.1rem;
}
ul.labs li > div.name span{
    font-size: 12px;
    font-size: .8rem;
    line-height: 1.5em;
    margin-top: .5em;
}
ul.labs li p{
    font-size: 12px;
    font-size: .8rem
}




/*footer*/

footer{
    background: #D6D5D3;
    min-height: 200px;
    text-align: center;
    padding: 2em 0 0 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    z-index: 80;
    white-space: nowrap
}
footer > div{
    display: inline-block;
    vertical-align: top;
    white-space: normal
}
footer div.siteMap{
    width: 50%; 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin-left: 24px;
    margin-left: 1.5rem;
    padding: 24px 0;
    padding: 1.5rem 0;
}
footer div.siteMap > div {
    height: 430px;
    position: relative;
    text-align: left;
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-flexbox;
    display: -webkit-flex;
    display:         flex;   
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-orient: vertical;
       -moz-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-direction: normal;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-font-smoothing: antialiased;
}
footer .siteMap ul{
    position: relative;
    vertical-align: top;
    font-size: 0;
    margin: 0;
    padding: 11px 0;
    padding: .7rem 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    max-width: 160px;
    max-width: 10rem;
}
footer .siteMap ul:nth-child(2),
footer .siteMap ul:nth-child(4),
footer .siteMap ul:nth-child(7){
    -webkit-flex: 1 0 auto;
}
footer .siteMap ul h4{
    margin: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 16px;
    font-size: 1rem;
    padding: .5em
}
footer .siteMap [ng-click]{
    cursor: pointer
}
footer .siteMap ul li {
    line-height: 1.4em;
    font-size: 14px;
    font-size: .875rem;
    padding: .3em .5em;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: .2s ease-out;
       -moz-transition: .2s ease-out;
         -o-transition: .2s ease-out;
            transition: .2s ease-out;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden
}
footer .siteMap ul li:hover{
    -webkit-transform: scale(.96);
       -moz-transform: scale(.96);
        -ms-transform: scale(.96);
         -o-transform: scale(.96);
            transform: scale(.96);
    color: #940917
}
footer div.info{
    font-size: .875em;
    width: 25%;
    position: relative;
    text-align: left;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin-top: 1em;
}
footer div.info > *{
    display: inline-block
}
footer div.info h2{
    font-size: 19px;
    font-size: 1.2rem;
    position: relative;
    letter-spacing: .1em;
    margin: 0;
    padding: 2em 0 1.2em 3.5em;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
footer div.info h2:before{
    content:'\e600';
    font-size: 80px;
    font-size: 5rem;
    line-height: 80px;
    line-height: 5rem;
    position: absolute;
    font-family: 'ico';
    left: -32px;
    left: -2rem;
    color:#960612;
    bottom: 16px;
    bottom: 1rem;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}
footer div.info h2 span{
    font-size: .7em;
    letter-spacing: .05;
    display: block;
    padding: 0 .3em
}
footer div.info > div{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: .5em 1.5em .5em 4em;
    line-height: 1.5em;
    position: relative
}
footer div.info > div span{
    position: absolute;
    display: inline-block;
    left: 0;
}
footer .copyRight{
    display: block;
    background: #58585C;
    width: 100%;
    font-size: .7em;
    color: #E1E0DE;
    line-height: 4em;
}

ul.pagination {
    padding: 16px 0 0 0;
    padding: 1rem 0 0 0;
    text-align: center;
}

ul.pagination li {
  display: inline-block;
  cursor: pointer;
  width: 32px;
  width: 2rem;
    font-size: 12px;
    font-size: .8rem;
  -webkit-transition: color 0.25s;
     -moz-transition: color 0.25s;
       -o-transition: color 0.25s;
          transition: color 0.25s;
}

ul.pagination li:hover {
  color: rgb(152, 3, 10);
}

ul.pagination li.active {
  color: rgb(152, 3, 10);
  font-weight: 600;
}

header div.mobile.logo,
header span.header,
header ul.nav div.mobile {
  display: none;
}




/*
 * 
 * 
 * 
 * 
 *          responsive start here
 * 
 * 
 * 
 * 
 * */

@media only screen 
    and (max-width : 1200px){
        section {
            padding: 2rem 0;
        }
        section > div {
            padding: 0 2%
        }  
        h2.fixed{
            padding: 0 4%;
            padding-top: 8rem
        }
        nav-left + *{
            padding: 0 4% 0 2%
        }
    /*header*/
        header nav{
            position: absolute;
            right: 0;
        }
        header div.logo{
            margin-left: 7rem
        }   
        header ul div.logo:before{
            font-size: 6rem;
            width: 6rem;
            line-height: 7rem;
        } 
        header ul.nav li{
            padding: 0 .7em;
        }
        header search input[type="search"]:focus{
            width: 16em;
        }  
    /*footer*/
        footer div.info{
            width: 33.333%;
            padding-left: 4em
        }   
        footer div.siteMap{
            width: 66.666%;
            padding-right: 3em
        }
    /*home*/
        ul.carouselNav{
            width: 33.333%
        }   
        section.carousel ul.banner{
            width: 66.666vw;
            height: 52.5vw;
            min-height: 480px;
            max-height: 500px;
        }
        section.carousel ul.banner:after{
            content: none;
        }
        div.latest-publications{
            padding-bottom: 4rem;
        }   
        div.latest-publications .ctrler,
        div.latest-publications .ctrler + .ctrler,
        div.latest-publications:hover .ctrler{
            -webkit-transform: none;
               -moz-transform: none;
                -ms-transform: none;
                 -o-transform: none;
                    transform: none;
            opacity: 1;
            filter: alpha(opacity=100);        
        }
        div.latest-publications .ctrler {
            top: auto;
            bottom: 0;
            width: 10rem;
            height: 3rem;
            left: auto;
            right: 50%;
        }
        div.latest-publications .ctrler:after{
            font-size: 1rem;
        }
        div.latest-publications .ctrler + .ctrler {
            left: 50%;
            right: auto;
        }   
    /*about*/
        section.about p{
            padding-right: 1.5rem;
        }
        section.about .videoWrap{
            margin: 0 0 1.5rem 1.5rem
        }
        section.about .videoWrap object,
            section.about .videoWrap:after{
            -webkit-transform: none;
               -moz-transform: none;
                -ms-transform: none;
                 -o-transform: none;
                    transform: none
        }
        ul.timeLine li{
            padding-bottom: 3.5rem
        }
    /*people*/
        ul.researchers{
            padding: 1rem 0
        }
        ul.researchers.list{
            padding-top: 3rem
        }
        ul.eventList li.grid{
            padding: .5rem .7rem
        }
    /*publications*/
        ul.publications{
            padding-top: 3rem
        }
    /*eventDetail*/
        div.eventDetail > div{
            padding-right: 6%
        }
    /*news detail*/
        div.eventDetail.news nav-left{
            display: none
        }
        div.eventDetail.news > div{
            padding: 0;
            margin: 0 auto;
        }
}

@media screen 
    and (min-device-width : 1600px){
        section{
            padding-left: 8%;
            padding-right: 8%
        }
        header nav{
            margin-right: 4vw
        }
        header search{
            margin-right: 5vw
        }
        section.about .videoWrap{
            margin-bottom: 4rem
        }
        section > div{
/*            padding: 0 16%;*/
        }
        ul.carouselNav{
            max-width: 480px
        }
        section.carousel.wide{
            max-height: 540px;
        }
        section.carousel.wide ul.banner{
            max-width: 960px
        }
        footer div.info{
            max-width: 480px;
            margin-left: 4%
        }
    
}



/*
 * 
 * 
 * 
 * 
 *          mobile style start here
 * 
 * 
 * 
 * 
 * */


@media only screen 
and (max-device-width : 480px)
and (orientation : portrait){
    article{
        padding-top: 6rem;
    }
    article *{
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        overflow-x: hidden
    }

    header{
        height: 4rem;
        top: 0;
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        background-color: rgb(150, 6, 18);
    }

    header span.header {
        display: block;
        font-size: 4.9vw;
        line-height: 4rem;
        height: 4rem;
        text-align: center;
        position: fixed;
        width: 100%;
        color: #ddd;
    }

    header ul.nav div.mobile {
        display: block;
    }

    header nav {
        display: none;
    }

    header.menu{
        overflow: visible
    }

    body header nav{
        opacity: 0:
    }

    header div.mobile.logo {
        display: block;
        color: #960612;
        font-size: 4rem;
        width: 6rem;
        line-height: 6rem;
        position: absolute;
        top: 0;
        text-align: center;
    }
    header div.mobile.logo:before {
      -webkit-filter: brightness(0) invert(80%);
    }
    body header div.mobile.logo {
        font-size: 2.4rem;
        width: 4rem;
        line-height: 4rem;
    }
    header div.menu-dismiss {
        visibility: hidden;
        height: 0;
    }
    header.menu div.menu-dismiss {
        display: block;
        position: absolute;
        width: 100%;
        top: 4rem;
        height: 100vh;
        z-index: -1;
        visibility: visible;
        background-color: rgba(20, 20, 20, 0.3);
    }
    header nav{
        padding: 0;
        line-height: 0;
        padding: .5rem 0
    }
    header nav a{
        line-height: 1.5em;
    }
    header div.outer-nav {
        position: absolute;
        top: 100%;
        overflow: hidden;
        margin-top: -1px;
        height: 0;
        padding: 0;
        opacity: 0;
        margin: 0;
    }
    header ul.nav{
        padding: 1.5rem 0;
        margin: 0;
        background: rgb(240, 240, 240);
        transform: translateY(-5rem);
        transition: transform .2s ease-out, opacity .2s ease-out;
    }
    header.menu ul.nav{
        transform: translateY(0);
    }
    header.menu div.outer-nav {
        height: auto;
        opacity: 1;
    }
    header [ico=menu]{
        color: #ddd;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    header [ico=menu]:before{
        font-size: 1.8rem;
        width: 4rem;
        line-height: 4rem;
        display: inline-block;
        text-align: center;
    }
    header.menu [ico=menu]:before {
        content:'\e60a';
    }
    body header:after {
        display: none;
    }

    body.scrolling header ul.nav li,
    header ul.nav li {
        font-weight: normal;
        margin: 0;
        width: 50%;
        line-height: 3em;
        box-sizing: border-box;
    }

    header ul.nav li:after{
        content: none;
    }

    header ul div.logo{
        display: none;
    }
    
    h1.nav {
        margin: .2em 0;
    }
    h1.nav span{
        width: 50%;
        padding: .5em 0;
        margin: 0;
        text-align: center;
        position: relative;
        float: right;
        margin-top: .1em:
    }
    h1.nav span.active{
        float: left;
        margin: 0;
    }
    h1.nav span.viewAll{
        padding: 0 .5em;
        float: right;
        margin-top: 1.5em;
        display: none;
    }
    div.load-more{
        padding: .5em 0;
    }
    div.load-more span{
        width: 66.666%;
    }
    section, section.carousel ~ section{
        background: none
    }
    section.carousel{
        height: 66.666vh;
        max-height: 100vh;
        min-height: 0;
        background: none;
        overflow: hidden;
    }
    section.carousel > div{
        padding: 0;
    }
    section.carousel ul.banner{
        min-height: 0;
        height: 66.666vh;
        width: 100vw;
        position: relative;
        overflow-y: hidden;
    }
    section.carousel ul.banner li {
        opacity: 1;
        top:0;
        height: 100vw;
    }
    section.carousel ul.banner:before,
    section.carousel ul.banner:after{
        content: none;
    }
    section.carousel .banner [bg-image]{
        height: 75%;
    }
    section.carousel .name{
        white-space: normal;
        text-align: left;
        width: 100%;
        padding: 0 1em 0 .5em;
        margin: 1em 0;
        margin-left: .5em;
        border-left: #960612 4px solid;
    }
    section.carousel .name span{
        margin-bottom: 0;
    }
    section.mainContent{
        padding: 0;
    }
    section.mainContent > div{
        padding: 0;
    }
    section.mainContent [class^='col']{
        width: 100%;
        padding: 0;
        padding-bottom: 3rem;
    }
    section.mainContent [class^='col-']{
        display: block;
    }
    section.mainContent ul.eventList{
        overflow-x: hidden;
    }
    section.mainContent ul.eventList > li{
        width: 100%;
    }
    section.mainContent ul.eventList.news li{
        width: 100%;
        padding: 0 1em 0 .5em;
        margin: .5em 0;
        margin-left: .5em;
        border-left: #960612 4px solid;
    }
    section.mainContent ul.eventList.news .name span{
        margin: 0;
    }
    section.mainContent ul.publications.new{
        white-space: normal;
        padding: 0 .5rem;
    }
    section.mainContent ul.publications.new li{
        width: 50%;
        padding: 0 .2rem;
    }
    section.mainContent ul.publications.new .ctrler{
        position: relative;
        display: none;
    }
    footer div.info{
        width: 100%;
        text-align: center;
        padding-bottom: 4em;
        padding-left: 0;
        margin: 0;
    }
    footer div.info h2{
        text-align: left;
        width: auto;
        padding-left: 5em;
        margin-left: -.5em;
    }
    footer div.info h2:before{
        left: 0;
    }
    footer div.info div{
        display: block;
        text-align: left;
        font-size: .875em;
        padding: 1em 1.3em 1em 20%;
    }
    footer div.info div span{
        width: 20%;
        text-align: center;
    }
    footer .copyRight {
        line-height: 2em;
        padding: 2em 0;
    }
}





/* ==========================================================================Helper classes========================================================================== *//** Image replacement*/.ir {background-color: transparent;border: 0;overflow: hidden;/* IE 6/7 fallback */*text-indent: -9999px;}.ir:before {content: "";display: block;width: 0;height: 150%;}/** Hide from both screenreaders and browsers: h5bp.com/u*/.hidden {display: none !important;visibility: hidden;}/** Hide only visually, but have it available for screenreaders: h5bp.com/v*/.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}/** Extends the .visuallyhidden class to allow the element to be focusable* when navigated to via the keyboard: h5bp.com/p*/.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto;}/** Hide visually and from screenreaders, but maintain layout*/.invisible {visibility: hidden;}/** Clearfix: contain floats** For modern browsers* 1. The space content is one way to avoid an Opera bug when the*    `contenteditable` attribute is included anywhere else in the document.*    Otherwise it causes space to appear at the top and bottom of elements*    that receive the `clearfix` class.* 2. The use of `table` rather than `block` is only necessary if using*    `:before` to contain the top-margins of child elements.*/.clearfix:before,.clearfix:after {content: " "; /* 1 */display: table; /* 2 */}.clearfix:after {clear: both;}/** For IE 6/7 only* Include this rule to trigger hasLayout and contain floats.*/.clearfix {*zoom: 1;}/* ==========================================================================EXAMPLE Media Queries for Responsive Design.These examples override the primary ('mobile first') styles.Modify as content requires.========================================================================== */@media only screen and (min-width: 35em) {/* Style adjustments for viewports that meet the condition */}@media print,(-o-min-device-pixel-ratio: 5/4),(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi) {/* Style adjustments for high resolution devices */}/* ==========================================================================Print styles.Inlined to avoid required HTTP connection: h5bp.com/r========================================================================== */@media print {* {background: transparent !important;color: #000 !important; /* Black prints faster: h5bp.com/s */box-shadow: none !important;text-shadow: none !important;}a,a:visited {text-decoration: underline;}a[href]:after {content: " (" attr(href) ")";}abbr[title]:after {content: " (" attr(title) ")";}/** Don't show links for images, or javascript/internal links*/.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content: "";}pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}thead {display: table-header-group; /* h5bp.com/t */}tr,img {page-break-inside: avoid;}img {max-width: 100% !important;}@page {margin: 0.5cm;}p,h2,h3 {orphans: 3;widows: 3;}h2,h3 {page-break-after: avoid;}}