/* General stuff */

/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v2/RPQGAQk3DD66RypwKRnBKQ.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v2/dTsnx5aTJLsh5XJEX4lpTw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v2/2fzaAAzWW07YitDl-NekHg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v2/5NAKUBdE3Nb95aTaJlZOXQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 400;
  src: local('Kanit Italic'), local('Kanit-Italic'), url(https://fonts.gstatic.com/s/kanit/v2/H4Ta9N6fe0_HqknuaFxz6fY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 400;
  src: local('Kanit Italic'), local('Kanit-Italic'), url(https://fonts.gstatic.com/s/kanit/v2/K-yHcVakJDYpV_geV10hvvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 400;
  src: local('Kanit Italic'), local('Kanit-Italic'), url(https://fonts.gstatic.com/s/kanit/v2/C839wXleWAEinDRzbIb2svY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 400;
  src: local('Kanit Italic'), local('Kanit-Italic'), url(https://fonts.gstatic.com/s/kanit/v2/-HSkZA4t5sxUrAMDGkrO1A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  src: local('Kanit Medium'), local('Kanit-Medium'), url(https://fonts.gstatic.com/s/kanit/v2/oArYK_4Uh0OdBYA11_h0OxTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  src: local('Kanit Medium'), local('Kanit-Medium'), url(https://fonts.gstatic.com/s/kanit/v2/k3PyxwcO82bD49MyqzQC8xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  src: local('Kanit Medium'), local('Kanit-Medium'), url(https://fonts.gstatic.com/s/kanit/v2/UvkE30TmWcD07ESVQhHR5hTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  src: local('Kanit Medium'), local('Kanit-Medium'), url(https://fonts.gstatic.com/s/kanit/v2/RHqh14DjcvgZGJknoCzKXvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


/* thai */
@font-face {
  font-family: 'Maitree';
  font-style: normal;
  font-weight: 400;
  src: local('Maitree'), url(https://fonts.gstatic.com/s/maitree/v1/gc5XOH6eiK1MZRv91EFtpvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Maitree';
  font-style: normal;
  font-weight: 400;
  src: local('Maitree'), url(https://fonts.gstatic.com/s/maitree/v1/1VkVwquxLWzFlWqNHHM4evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Maitree';
  font-style: normal;
  font-weight: 400;
  src: local('Maitree'), url(https://fonts.gstatic.com/s/maitree/v1/hYWTo2z0x6Ed7oiyspJ7j_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Maitree';
  font-style: normal;
  font-weight: 400;
  src: local('Maitree'), url(https://fonts.gstatic.com/s/maitree/v1/7hi-mk3vpYTVambUZZETVA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* thai */
@font-face {
  font-family: 'Maitree';
  font-style: normal;
  font-weight: 700;
  src: local('Maitree Bold'), local('Maitree-Bold'), url(https://fonts.gstatic.com/s/maitree/v1/FHbXEJSqHW9bZ9aGnl4U2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Maitree';
  font-style: normal;
  font-weight: 700;
  src: local('Maitree Bold'), local('Maitree-Bold'), url(https://fonts.gstatic.com/s/maitree/v1/LX9xBY9z3MyEputbZBh4aCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Maitree';
  font-style: normal;
  font-weight: 700;
  src: local('Maitree Bold'), local('Maitree-Bold'), url(https://fonts.gstatic.com/s/maitree/v1/1waW_ntxHaTqwMmt5pMvDiEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Maitree';
  font-style: normal;
  font-weight: 700;
  src: local('Maitree Bold'), local('Maitree-Bold'), url(https://fonts.gstatic.com/s/maitree/v1/P-HydeqfqSxrhj88sjkSFPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


body {
  min-height: 100%;
  line-height: 1.2;
  word-wrap: break-word;
  font-family: "Maitree", "Times New Roman", Times, serif;
  font-size: 100%;
}

.main-content h2 {
  font-size: 1.6em;
  line-height: 1.4;
}

#header,
h1.page-title {
  font-family: "Kanit", Verdana,  sans-serif;
  font-weight: 500; /* Kanit Medium */
}

h2,
ul.links,
.node__meta,
.node__title,
.node-preview-container,
.link,
.breadcrumb,
.button,
.field--type-entity-reference,
.field--name-field-tags {
  font-family: "Kanit", Verdana,  sans-serif;
}

.event-field-and-date strong {
  font-family: "Kanit", Verdana,  sans-serif;
  font-weight: 500; /* Kanit Medium */
}

a,
a:active,
a:hover,
a:focus,
a.link {
  text-decoration: none;
  border-bottom-style: none;
}

/* The teaser titles are links to the full content;
 * let's use the default link color
 */
.node--view-mode-teaser h2 a {
  color: #9d1510;
}

/* Colored blocks ("what is the ccsl", "get involved",
 * category listings etc.)
 */

div.event-info-and-date,
div.region-sidebar-second div.block,
div.view-projects-page-header,
div.view-events-page-header {
  background-color: #edfcff;
  border-color: #92d1dd;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

dl { display:block; line-height:1.3;}
dt { display:inline-block;width:3em; word-wrap:break-word;}

dd { margin-left:0; display:inline-block;}

/* A little more space than the theme default */
@media all and (min-width: 851px) {
  .layout-sidebar-second .main-content {
    margin-right: 32%;
    margin-left: 0;
  }
  .layout-one-sidebar .main-content {
    width: 68%;
  }
  .main-content {
    float: left;
    position: relative;
  }
  #sidebar-second {
    width: 26%;
    margin-left: -26%;
    clear: none;
  }
}


/*************************************************************************/

/* Top of page (lang selector) */

div.region-secondary-menu {
  color: #bbbbbb;
  background: #222222;
}

#block-languageswitcher {
  margin-left: 0.3rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

#block-languageswitcher .translation-link a {
  color: #bbbbbb;
}

#block-languageswitcher a.is-active {
  color: #fffeff;
}

#block-languageswitcher ul li {
  display: inline;
  margin-right: 1.5em;
  font-size: 0.95em;
  font-weight: 500; /* Kanit Medium */
}

/*************************************************************************/

/* Main navigation menu; some redundant stuff because we need
 * not only to define what we want but also to override the
 * theme defaults
 */

div.region-primary-menu {
  color: #bbbbbb;
  background: #222222;
  font-weight: 500; /* Kanit Medium */
  line-height: 0.8;
}

div.region-primary-menu .menu-item,
div.region-primary-menu .menu-item a {
  background: #222222;
  color: #bbbbbb;
  text-shadow: none;
  border-style: none;
}

div.region-primary-menu .menu-item a:focus,
div.region-primary-menu .menu-item a:hover,
div.region-primary-menu .menu-item a.is-active {
  background: #222222;
  color: #ffffff;
  text-shadow: none;
}

@media all and (min-width: 461px) {

  /* If the menu is not collapsed (i.e., not mobile),
   * put all menu items in a single line
   */
  div.region-primary-menu .menu-item {
    display: inline;
    line-height: 0.8;
  }

  div.region-primary-menu .menu-item a {
    display: inline;
    padding: 0.2em 0.8em 0.4em;
    margin-bottom: 0;
    float: left;
  }

  /* Silly animation */
  div.region-primary-menu .menu-item a:focus,
  div.region-primary-menu .menu-item a:hover,
  div.region-primary-menu .menu-item a.is-active {
    padding: 0 0.8em 0.4em;
  }

}

/* For narrower displays, distribute menu items evenly */
@media all and (min-width: 461px) and (max-width: 900px) {

  .region-primary-menu .menu-item,
  body:not(:target) .region-primary-menu .menu-item {
    overflow: visible;
    width: 15%;
  }

}

/*************************************************************************/

/* Fixed blocks on the right side of the page */

div.region-sidebar-second div.block .text-formatted ul {
  margin: 0.3em;
}

div.region-sidebar-second div.block .text-formatted ul ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

div.region-sidebar-second div.block .text-formatted p {
  margin: 0 0 0.3em;
}

div.region-sidebar-second div.block h2 {
  font-size: 1.3em;
}

/*************************************************************************/

/* The block of choices at the top of the projects
 * (HPC, theory, etc.) and events (Lecture,
 * presentation etc.) pages.
 */

div.view-projects-page-header,
div.view-events-page-header {
  width: 80%;
  float: right;
  padding: 0.8em;
  padding-bottom: 0.4em;
  margin-bottom: 2em;
  max-width: 38em;
  margin-right: 5%;
}

div.view-projects-page-header div.view-content,
div.view-events-page-header div.view-content {
  display: flex;
  flex-wrap: wrap;
}

div.view-projects-page-header div.view-content div.project-category-list-item,
div.view-events-page-header div.view-content div.event-type-list-item,
div.view-events-page-header div.view-content div.annexes-list-item {
  min-width: 11em;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30%;
  position: relative;
  margin-bottom: 0.6em;
}

div.view-projects-page-header div.view-content div.category-description,
div.view-events-page-header div.view-content div.event-type-description {
  width: 80%;
  padding-left: 0;
  margin-left: 0;
  opacity: 0;
  max-height: 0;
  transition: padding-left 0.2s ease-out, margin-left 0.2s ease-out, opacity 0.2s ease-out, max-height 0.1s ease-out 0.2s;
}

div.view-projects-page-header div.view-content div.project-category-list-item:hover div.category-description,
div.view-projects-page-header div.view-content div.project-category-list-item:focus div.category-description,
div.view-events-page-header div.view-content div.event-type-list-item:hover div.event-type-description,
div.view-events-page-header div.view-content div.event-type-list-item:focus div.event-type-description {
  padding-left: 0.5em;
  margin-left: 0.5em;
  opacity: 1;
  max-height: 7em;
  transition: padding-left 0.1s ease-in-out 0.1s, margin-left 0.1s ease-in-out 0.1s, opacity 0.1s ease-in-out 0.1s, max-height 0.2s ease-in;
}

/* Prevent content from floating to the side of the block
 * (we use "float:right" only to align things to the right,
 * not to actually "float")
 */
div.view-projects .view-header > *,
div.view-events .view-header > * {
  clear: both;
}

div.view-projects::after,
div.view-events::after {
  display: table;
  content: "";
  clear: both;
}

/*************************************************************************/

/* the "tags" (event type, project category etc.) shown
 * for each project/event
 */

/*
.node--type-event > header > h2.node__title,
.node--type-project > header > h2.node__title,
.page-node-type-event #block-ccsl-page-title h1.page-title,
.page-node-type-project #block-ccsl-page-title h1.page-title {
  margin-bottom: 0.3rem;
}
*/

.page-node-type-event #block-ccsl-content > .content,
.page-node-type-project #block-ccsl-content > .content,
.node--type-event > div.node__content,
.node--type-project > div.node__content {
  margin-top: 0;
}

div.field--name-field-project-category.field__items,
div.field--name-field-annexes.field__items,
div.field--name-field-event-type.field__item {
  margin-left: 0.6rem;
  clear: both;
  display: table;
  margin-bottom: 0;
}

div.field--name-field-project-category .field__item,
div.field--name-field-annexes .field__item,
div.field--name-field-event-type.field__item {
  margin-right: 0.3rem;
  font-size: 0.7rem;
  font-style: italic;
  color: #0093b0;
}

div.field--name-field-annexes .field__item,
div.field--name-field-project-category .field__item {
  display: block;
  float: left;
}

/* Create a separator between elements */
div.field--name-field-project-category .field__item:not(:last-child)::after,
div.field--name-field-annexes .field__item:not(:last-child)::after {
  content: "|";
  font-style: normal;
  margin-left: 0.3rem;
}

/* It would be better to have a div with all tags
 * and set "margin-bottom: 2em" there, but we do
 * not have such div.
 */
.node--type-event div.field--name-field-image,
.node--type-project div.field--name-field-image,
.node--type-project div.field--name-body,
.node--type-event div.field--name-body {
  padding-top: 1.8rem;
}

/*************************************************************************/

/* some misc and minor tweaks */

@media all and (min-width: 560px) {
  .node .field--type-image {
    float: left; /* LTR */
    margin: 0 1em 0 0; /* LTR */
  }
  [dir="rtl"] .node .field--type-image {
    float: right;
    margin: 0 0 0 1em;
  }
  .node .field--type-image + .field--type-image {
    clear: both;
  }
}

/* Event info (date, place etc.) goes into a box with less
 * spacing among paragraphs */
div.event-info-and-date {
  display: inline-block;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  padding-left: 1rem;
  padding-right: 5rem;
  margin-left: 1.5rem;
  margin-bottom: 2.5rem;
  margin-top: 1rem;
  clear: both;
  min-width: 30rem;
}

div.event-info-and-date p {
  margin: 0 0 0.2em;
}

/* "Photos" in the event page formatted more like a title */
div.block-views div.view-event-photos div.view-header {
  font-family: "Kanit", Verdana,  sans-serif;
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
}

/* The years in the publications view */
div.view-publications div.item-list h3 {
  font-weight: 900;
  padding-left: 1rem;
  text-decoration: underline;
}

/* Items in publications view */
div.view-publications div.view-content ul li {
  text-indent: -2rem;
  padding-left: 2rem;
}

div.view-publications div.view-content ul li span.publication-author {
  font-weight: bold;
}

/* The abstract in the publications view */
div.view-publications div.view-content ul li div.views-field-body {
  padding-top: 0.5rem;
  text-indent: 0rem;
  font-style: italic;
  font-size: smaller;
}

/* The layout of the individual publication page */
article.node--type-publications.node--view-mode-full div.field--name-field-author {
  font-weight: bold;
}

article.node--type-publications.node--view-mode-full div.field--name-body {
  padding-top: 1rem;
}

article.node--type-publications.node--view-mode-full div.field--name-field-publication-info {
  padding-top: 1rem;
}

/* The photos page */

.views-field-field-photos{
  flex: 1 1 50%
}

.photos-title{
  padding-bottom: 2em;
}

/* page trails */

ul.pager {
  text-align: center;
  list-style: none;
  padding-top: 2em;
}
ul.pager li {
  display: inline;
  padding: 10px;
  margin: 5px;
}

/* The images in lists of events, projects etc, such as the homepage */

article.node .field--type-image { max-width: 90vw; }

@media screen and (min-width: 560px) {
    article.node .field--type-image { max-width: 50vw; }
}

@media screen and (min-width: 851px) {
    article.node .field--type-image { max-width: 25vw; }
}

@media screen and (min-width: 1920px) {
    article.node .field--type-image { max-width: 325px; }
    article.node.node--type-project .field--type-image { max-width: 150px; }
}

/* team page*/

.team-left-side{
  width: 15em; 
  margin-right: 2em;
  max-width: 15em;
}

.team-left-side > img{
  width: 15em;
  max-width: 15em;
}

.honor-board-background{

  display: flex; 
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  width:80vw;
  max-width:100%; 
  padding: 2em 1em 2em 1em;
  background: linear-gradient(180deg, #5E5757 0%, rgba(12, 11, 11, 0.47) 63.54%, rgba(28, 25, 25, 0.71) 99.99%);
  mix-blend-mode: multiply;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  font-size:medium;
}

.honor-board-background h2{
  color: white;
}
.honor-board{
  max-width: 90%;
  color: white;
  width:70vw; 
  display: flex;
  justify-content: center;
  align-items: start !important;
  border: 1px solid rgba(252, 252, 252, 0.3);
  border-radius: 16px;
  padding: 1em 1em 0em 1em;
  margin-bottom: 20px;
}

.honor-board-names ul{
  list-style-type: none;
}

.vl {
  border-left: 1px solid white;
  height: 300px;
  margin-left: 10px;
  margin-right: 10px;
  align-self: center
}

.honor-board-names ul li{
  list-style-type: none;
  margin-bottom: 4px;
}
/* graffiti page */
.honor-board-ccsl-logo{
  width:100%;
  display: flex;
  justify-content: flex-end;
  height: 4em;
}


.asside-div{
  display:flex;
  align-items: center;
}

.graffiti-left-side{
  width:40%;
  margin-right: 4em;
  
}

.grafite{
  width:80%;
}

/* location page*/
.content-row{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3em;
}

.content{
  display:flex;
  justify-content: center;
  flex-direction:column;
  flex-basis: 100%;
  height:100%;
}

.content > p{
  margin-bottom: 0;
}

.content-image{
  display:flex;
  justify-content: space-around;
  flex-direction: column;
  margin-right: 50px;

}


.content-image > img{
  width: 12em;
  max-width: 12em;
}

.italic{
  color:#9d1510;
  font-style: italic;
}