body {
    font-family: "Hiragino Sans";
}

/* headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; */
    text-transform: none;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

#sidebar {
    min-width: 15em;
    width: 15em;
}

#main {
    padding: 0px;
    /* background-color: #FFFFFF; */
}
@media screen and (max-width: 1280px) {
    #sidebar {
        border-top: solid 1px rgba(160, 160, 160, 0.3);
        margin: 3em 0 0 0;
        min-width: 0;
        padding: 3em 0 0 0;
        width: 100%;
    }
}

@media screen and (min-width: 1300px) {
    #main { width: 80%; }
    #sidebar { width:20%; }
}

/* For post component */
.post header .title > h1:first-letter,
.post header .title > h2:first-letter {
    /* color: #f05f40; */
    /* font-size: 1.5em; */
}
.post.post-list {
    margin-bottom: 1em;
}
.post.post-list a {
    display: inline-block;
    width: 100%;
}
.post.post-list h1:first-letter {
    margin-right: .1em;
    /* font-size: 2.0em; */
    /* color: #f05f40; */
}

.post-image {
    width: 20%;
}
.post-text {
    width: 100%;
}

.post.research-list a {
    display: inline-block;
    width: 100%;
}
.post.research-list h1:first-letter {
    margin-right: .1em;
    /* font-size: 2.0em; */
    /* color: #f05f40; */
}

.post.content-list h1:first-letter {
    margin-right: .1em;
    /* font-size: 2.0em; */
}

#content h1,
.post.content-list h1 {
    font-size: 1.3em;
    padding-bottom: .5em;
    padding: .25em 0 .25em .75em;
    border-left: 6px solid #f05f40;
}
#content h1:first-letter,
#content h2:first-letter {
    margin-right: .1em;
    /* font-size: 1.5em; */
    /* color: #f05f40; */
}

#content ul,
.post.content-list ul {
    list-style-type: none;
}
#content ul > li a,
.post.content-list ul > li a {
    display: block;
    padding-top: 0.5ex;
    padding-bottom: 0.1ex;
}

#content ul > li time,
.post.content-list ul > li time {
    color: #f05f40;
    margin-right: 1em;
    /* border-top: 2px solid #f05f40; */
    /* border-bottom: 2px solid #f05f40; */
}
#content ul > li span,
.post.content-list ul > li span {
    margin-right: 1em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-right: 0.5em;
    padding-left: 0.5em;
    background-color: #f05f40;
    border-radius: 0.8em;
    color: #fff;
}


.links .language {
    color: #f05f40;
}

/* CSS for intro */
#intro header h2 {
    font-size: 1.9em;
}
#intro header p {
    /* text-align: left; */
}


/* CSS for Slick */
#content .slick-carousel {
    max-width: 90%;
    margin: auto;
    margin-top: 3em;
    margin-bottom: 3em;
    padding-top: 3em;
    padding-bottom: 5em;
    background-color: #000;
}
#content .slick-carousel img {
    max-width: 85%;
    max-height: 500px;
    margin-left: auto;
    margin-right: auto;
}
#content .slick-carousel p,
#content .slick-carousel h3 {
    max-width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}
#content .slick-carousel h3 {
    font-size: 1.5em;
    margin-bottom: 0;
}
#content .slick-prev:before,
#content .slick-next:before {
    color: #f05f40;
    font-size: 3rem;
}
#content .slick-dots {
    background-color: #fff;
}

.image.center-image {
    max-width: 80%;
}

.draft {
    color: #f05f40;
    border-top: solid 2px;
    border-bottom: solid 2px;
    font-weight: 500;
}

.category {
    color: #f05f40;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-top: solid 2px;
    border-bottom: solid 2px;
    font-size: 1.5em;
}

.press-release {
    color: #ff0000;
}
.highlight {
    color: #f05f40;
}
.topics {
    color: #336600;
}
.cafe {
    color: #330099;
}
.tag {
    font-size: 1.5em;
}

.caption {
    margin: auto;
    padding: 0 10px;
    margin-bottom: 20px;
    max-width: 80%;
    color: #0000ff;
    font-style: italic;
}


/* Tiles */
.tiles {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    postiion: relative;
    /* margin: -2.5em 0 0 -2.5em; */
    margin: auto;
}
.tiles article {
    -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
    position: relative;
    width: calc(50% - 2.5em);
    margin: 2.5em 0 0 2.5em;
}
.tiles article > .image {
    -moz-transition: -moz-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    transition: transform 0.5s ease;
    position: relative;
    display: block;
    width: 100%;
    border-radius: 0px;
    overflow: hidden;
}
* + .tiles {
    margin-top: 2em;
}
body.is-loading .tiles article {
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
}
body.is-touch .tiles article .content {
    max-height: 15em;
    opacity: 1;
}
@media screen and (max-width: 800px) {
    .tiles {
        margin: 0;
    }
    .tiles article {
        width: 100%;
        /* margin: 1.25em 0 0 0; */
    }
    .tiles article:hover > .image {
        -moz-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
        transform: scale(1.0);
    }
}


/* For printing */
@media print {
    #main {
        z-index: 100;
    }
    #sidebar {
        display: none;
    }
}

/* For Header component */
.header {
    box-shadow : 0 2px 20px rgba(0,0,0,0.2);
    font-size: 1.2em;
}
.header__title {
    color: orange;
}
.header__title-text {
    font-size: 1.7em;
}
.nav__links { font-size: 500%;  }
.nav__links-item { ;}


/* For Card component */
.card {
    background-color: #ffffff;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    box-shadow : 0 2px 10px rgba(0,0,0,0.2);
    padding: 20px;
}
.card__image{
    display: inline-block;
    float:left;
    max-height: 300px;
    padding-right: 10px;
}
.card__image-responsive{
    max-width: 100%;
    max-height: 300px;
    width: auto;
}
.card__title {
    font-size: 1.1em;
    border-bottom: dashed 1px lightgray;

.card__meta {
    border-bottom: dashed 1px lightgray;
    margin-bottom: 5px;
}