/*############################################################################
 * general
 *##########################################################################*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
  --primary-color: #c64751;
  --secondary-color: #ffa500;
  --dark-color: #186cc5;
  --light-color: #9fc1e5;
  --warning-color: #ff0000;
  --header-font: 'Montserrat', sans-serif;
  --content-font: 'Open Sans', sans-serif;
}

* { font-family: var(--content-font); }

* { font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); }

/*
@media only screen and (max-device-width : 640px) {
* { font-size: 14px; }}
@media only screen and (min-device-width : 641px)
                   and (max-device-width : 1024px) {
* { font-size: 16px; }}
@media only screen and (min-device-width : 1025px) {
* { font-size: 18px; }}
*/

@media only screen and (max-device-width : 640px) {
.paddingside { padding: 0px 16px 0px 16px !important; }}
@media only screen and (min-device-width : 641px)
                   and (max-device-width : 1024px) {
.paddingside { padding: 0px 32px 0px 32px !important; }}
@media only screen and (min-device-width : 1025px) {
.paddingside { padding: 0px 15vw 0px 15vw; }}
/* @media only screen and (min-device-width : 1025px)
                   and (max-device-width : 1440px) {
.paddingside { padding: 0px 144px 0px 144px !important; }}
@media only screen and (min-device-width : 1441px) {
.paddingside { padding: 0px 256px 0px 256px !important; }} */

@media only screen and (max-device-width : 640px) {
.modalcontainer { padding: 16px 16px !important; }}
@media only screen and (min-device-width : 641px)
                   and (max-device-width : 1024px) {
.modalcontainer { padding: 7.5vh 32px 7.5vh 32px !important; }}
@media only screen and (min-device-width : 1025px) {
.modalcontainer { padding: 7.5vh 15vw 7.5vh 15vw !important; }}
/*@media only screen and (min-device-width : 1025px)
                   and (max-device-width : 1440px) {
.modalcontainer { padding: 72px 144px !important; }}
@media only screen and (min-device-width : 1441px) {
.modalcontainer { padding: 128px 256px !important; }}*/

@media only screen and (max-device-width : 480px) {
.paddingrightmedium { padding-right: 0px !important;}}
@media only screen and (min-device-width : 481px) {
.paddingrightmedium { padding-right: 8px !important; }}

@media only screen and (max-device-width : 639px) {
.paddingleftmedium { padding-left: 0px !important; }}
@media only screen and (min-device-width : 640px) {
.paddingleftmedium { padding-left: 8px !important; }}


.sectionheader {
  font-family: var(--header-font);
  padding-top: 8px !important;
  padding-bottom: 6px !important;
  font-size: 1.1em !important;
}

.noselect {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

.nodrag {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.loading {
  background-color: #fff;
  position: fixed;
  top: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 7;
}

.loadmore {
  width: 48px;
  height: 48px;
}

.spinner {
  background: url("../images/spinner.gif") no-repeat center center;
  background-size: 48px;
}

hr {
  width: 100%;
  border: 1px solid gray;
}

a {
  text-decoration: none;
  color : #000;
}

a:hover {
  text-decoration: underline;
  color : #000;
}

.gotohome, .gotocc, .gotori, .gotopo, .gotoau:hover {
  cursor: pointer;
}

/* TODO: uncomment when article ready
.gotosticky, */.gotophe0, .gotophe1, .gotopro0, .gotopro1:hover {
  cursor: pointer;
}

/*############################################################################
 * header
 *##########################################################################*/
.headercontainer {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 78px;
  background: var(--primary-color);
  z-index: 10;
  -webkit-box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
}

.headermenu {
  display: flex;
  justify-content: space-around;
  font-size: 1.2em;
/*  margin: auto 0px auto 0px;  */
  color: #fff;
  cursor: default;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.headermenucontainer:hover {
  background: #b8323f;
}

.headermenutext {
  font-family: var(--header-font);
  margin: auto 0px auto 0px;
  color: #fff;
}

@media only screen and (max-device-width : 640px) {
.headermenutext { padding: 0 1.5vw 0 1.5vw; }}
@media only screen and (min-device-width : 641px) {
.headermenutext { padding: 0 2vw 0 2vw; }}

/*
@media only screen and (max-device-width : 640px) {
.headermenutext { padding: 0 6px 0 6px; }}
@media only screen and (min-device-width : 641px)
                   and (max-device-width : 1024px){
.headermenutext { padding: 0 12px 0 12px; }}
@media only screen and (min-device-width : 1025px) {
.headermenutext { padding: 0 24px 0 24px; }}
*/

.headermenusmall {
  padding: 0;
  float: right;
  position: relative;
}

.headermenusmallcontent {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0ms 400ms, opacity 400ms 0ms;
  width: 50vw;
/*  height: 100vh; */
  position: absolute;
  top: 78px;
  right: 0px;
  background-color: #d9535e;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}

.showmenusmall {
  height: 100vh;
  opacity: 1;
  transition: height 0ms 0ms, opacity 600ms 0ms;
}

.headermenusmallcontent div {
  font-family: var(--header-font);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 24px 12px 24px 12px;
  font-size: 1.0em;
  color: #fff;
}

.headermenusmallcontent div:hover {
  background-color: #b8323f;
}

.headermenusmall:hover .headermenusmallcontent {
  display: block;
}

.headermenusmallicon {
  -webkit-transition: -webkit-transform .35s ease-in-out;
  -ms-transition: -ms-transform .35s ease-in-out;
  transition: transform .35s ease-in-out;  
  width: 28px;
  height: 28px;
  margin: auto 0px auto 0px;
}

.headermenusmalliconcontainer {
  height: 100%;
  display: flex;
  align-items: center;
}

.headermenuactive {
  font-weight: bold;
  color: #fff;
}

.headerlan {
  margin: auto 0 auto 0;
}

.headerlanimage {
  width: auto;
  height: 22px;
  margin: auto 0 auto 0;
}

.headertitleimage {
  border-radius: 4px;
  width: 54px;
  height: 54px;
  margin: auto 12px auto 0;
}

.lantext {
  color: rgba(255, 255, 255, 0.55);
}

.lantext:hover {
  text-decoration: underline;
  cursor: pointer;
}

.lantextdivider {
  font-family: var(--header-font);
  color: rgba(255, 255, 255, 0.55);
}

.lantextactive {
/*  font-family: var(--header-font);  */
  font-weight:bold;
  color: #fff;
}

.menusmalltext {
  font-family: var(--content-font);
  color: #000;
  padding: 8px;
}

.rotated {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/*############################################################################
 * home
 *##########################################################################*/
.gotocid:hover {
  cursor: pointer;
}

.home {
  width: 100%;
  min-height: 225px;
  display: flex;
/*  align-items: center;
  justify-content: center;  */
  margin-top: 78px;
}

.homecontent {
  align-items: center;
}

.homeimage {
  width: 128px;
  height: auto;
  margin: 12px;
}

@media only screen and (max-device-width : 480px) {
.homeinsightodd { padding-right: 1px !important; }}
@media only screen and (min-device-width : 481px) {
.homeinsightodd { padding-right: 6px !important; }}

@media only screen and (max-device-width : 639px) {
.homeinsighteven { padding-left: 1px !important; padding-bottom: 1px !important; }}
@media only screen and (min-device-width : 640px) {
.homeinsighteven { padding-left: 10px !important; padding-bottom: 14px !important; }}

.homeinstagramcontents {
  padding-bottom: 12px !important;
}

.homeinstagramimage {
  width: 100%;
}

.homeinstagramvideo {
  width: 100%;
  height: auto;
}

.hometext {
  font-size: 1.2em;
}

.phenomena {
  background: #f0f0f0;
}

.phenomenacaption {
  padding-top: 8px;
  padding-bottom: 12px;
  font-size: 1em;
}

.phenomenaimage {
  width: 100%;
}

.projectcaption {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 1em;
}

.projectimage {
  width: 100%;
}

.searchbox input[type=text] {
  height: 2em;
  float: right;
  padding: 6px;
  border: none;
  font-size: 1em;
}

.searchbox button {
  height: 2em;
  float: right;
  padding: 6px;
  background: #ddd;
  font-size: 1em;
  border: none;
  cursor: pointer;
}

.stickycontainer {
  position: relative;
  width: 100%;
  margin-top: 14px;
}

.stickyimage {
  width: 100%;
}

.stickytitlecontainer {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.stickytitle {
  width: 100%;
  font-family: var(--header-font);
  padding-left: 0.5em;
  padding-right: 0.5em;
  color: #fff;
  margin: auto 0px auto 0px;
}

/* TODO: uncomment when article ready
.stickytitle:hover {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
}
*/

@media only screen and (max-device-width : 639px) {
.stickytitle { font-size: 1.4em; }}
@media only screen and (min-device-width : 640px) {
.stickytitle { font-size: 2.4em; }}

/*############################################################################
 * insights
 *##########################################################################*/
.insights {
  width: 100%;
  min-height: calc(100vh);
  padding-top: 90px;
  padding-bottom: 12px;
}

.instagramcontents {
}

.instagramcontent {
  position: relative;    
  padding: 1px;
}

.instagramimage {
  position: absolute;
  padding: 1px;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.instagramimageplaceholder {
  position: relative;
  width: 100%;
}

.instagramcontenttype {
  opacity: 1.9;
  padding: 1px;
  position: absolute;
  width: 18%;
  height: 18%;
  right: 0;
  top: 0;
}

.instagramimage:hover {
  cursor: pointer;
}

.instagramtext {
  font-size: 0.75em;
}

/*############################################################################
 * institute
 *##########################################################################*/
.institute {
  padding-top: 92px;
  padding-bottom: 12px;
}

.institutecaption {
  margin-bottom: 12px;
}

.instituteheadercontainer {
  position: relative;
}

.instituteheader {
  font-family: var(--header-font);
  margin-bottom: 8px;
  font-size: 1.5em;
  text-align: right;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  color: #fff;
}

.instituteheaderbackground0 {
  background-image: url("../images/institute_header_0.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.instituteheaderbackground1 {
  background-image: url("../images/institute_header_1.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.instituteprojects {
  margin-top: 12px;
}
.instituteprojectcaption {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 1em;
}

.instituteprojectimage {
  width: 100%;
}

.loadbuttontest {
  width: 100%;
  margin: 4px 0px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  text-align: center;
}

.loadbuttontest:hover {
  cursor: pointer;
}

.loadbuttontest:active {
  background: #f0f0f0;
}

/*############################################################################
 * outreach
 *##########################################################################*/
.outreach {
  padding-top: 84px;
  padding-bottom: 18px;
  min-height: 720px;
}

.outreachimage {
  width: 100%;
}

.outreachcaptionpublic {
  padding-top: 12px;
  font-size: 1em;
}

.outreachcaptionsoftware {
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  border-left: 1px solid #d0d0d0;
  padding: 12px;
  font-size: 1em;
}

.softwareimage {
  border-top: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  border-left: 1px solid #d0d0d0;
  width: 100%;
  margin-top: 12px;
}

.softwares {
  padding-bottom: 12px;
}

.publics {
  padding-top: 0px;
}

.grayline {
  width: 100%;
  border: 1px solid #f0f0f0;
}

.registerbtn {
  background-color: var(--primary-color);
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity:1;
}

/*############################################################################
 * about
 *##########################################################################*/
.about,
.profile {
  min-height: calc(100vh);
  margin-top: 78px;
  background-image: url("../images/about_halfcircle.png"), url("../images/about_circle.png");
  background-position: bottom left, top right;
  background-repeat: no-repeat;
  background-size: 61vw auto, 33vw auto;
  padding-top: calc(15vw);
  padding-bottom: calc(15vw);
}

.aboutheader {
  font-family: var(--header-font);
  margin-bottom: 0.5em;
  font-size: 2.5em;
}

.about a,
.profile a {
  color: var(--secondary-color);
}

.profile-roles a {
  background: var(--secondary-color);
  color: #fff;
  border-radius: 100px;
  padding: 2px 8px;
  margin-right: 4px;
}

.profile-roles a:hover {
  text-decoration: none;
  opacity: 0.8;
}

.profile h2 {
  margin-top: 28px;
}

.profile h1 {
  font-family: var(--header-font);
  font-size: 2.5rem;
}

.profile h2 {
  font-family: var(--header-font);
  font-size: 1.1rem;
}

.profile h3 a {
  font-family: var(--header-font);
  font-size: 1.0rem;
}

.profile img {
  width: auto;
  height: 5.2rem;
  margin: auto 16px auto 0;
  border-radius: 1rem;
}

/*###########################################################################
 * footer
 *#########################################################################*/
.footer {
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--primary-color);
  -webkit-box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.footercontent {
  color: #fff;
  margin: 12px 0px 12px 0px;
  font-size: 12px;
}

.footerimage {
  height: 48px;
  width: auto;
  margin-bottom: 4px;
  margin-right: 12px;
}

.footersocialcontainer {
  margin: 12px 0px 12px 0px;
  display: flex;
  justify-content: space-between;
}

.footersocialimage {
  width: 28px;
  height: auto;
  margin-right: 12px;
  margin-bottom: 6px;
}

.footersocialimage:hover {
  cursor: pointer;
}

.footersocialimages {
}

.footertext {
  color: #fff;
  font-size: 12px;
}

.footertexttitle {
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

.gotocmg:hover {
  text-decoration: underline;
  cursor: pointer;
}

/*###########################################################################
 * modal
 *#########################################################################*/
.close {
  position: absolute;
  margin: 12px;
  top: 0px;
  right: 0px;
  color: #e0e0e0;
  z-index: 5;
}

.close:hover {
  color: #f0f0f0;
}

.carousel-control {
  background-image: none !important;
  opacity: 0.3;
  width: 10%;
  height: 25%;
  margin: auto;
}

.carousel-control:hover {
  opacity: 0.5;
  color: #fff;
}

@media (orientation: portrait) {
  .modalcontent {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100%;
  }    
  .modalmedia {
    width: 100%;
    height: auto;
  }
  .modalmediacontainer {
    background: #202020;
    width: 100%;
  }
}
@media (orientation: landscape) {
  .modalcontent {
    display: flex;
    flex-direction: row;
    height: 100%;
  }
  .modalmedia {
    height: 100%;
    padding-bottom: 0%;
  }
  .modalmediacontainer {
    height: 100%;
    width: auto;
  }
  .modalcaptioncontainer {
    overflow-y: scroll;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0; 
  }
}

.modalcaption {
  padding: 12px;
  height: 100%;
  white-space: pre-wrap;
}

.modalcaptioncommenticon {
  width: 28px;
  height: auto;
}

.modalcaptioncommenticon:hover {
  cursor: pointer;
}

.modalcaptioncontainer {
  background: #fff;
  width: 100%;
}

.modalcaptiondate {
  margin-top: auto;
  margin-bottom: auto;
  font-size: 0.9em;
  color: #a0a0a0;
}

.modalcaptiondateandshare {
  padding: 12px;
  display: flex;
  justify-content: space-between;
}

.modalcaptionrecommendations {
  padding: 12px;
}

.modalcaptionshareicon {
  width: 28px;
  height: auto;
}

.modalcaptiontags {
  padding: 12px 12px 0px 12px;
  font-size: 0.8em;
  color: #0000ff;
}

.modalimageplaceholder {
  position: relative;
  top: 0;
  left: 0;
}

.modalcarouselcontainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modalvideo {
  width: 100%;
}

.recommendation {
  color: #c64752;
}

.alphadots {
  opacity: 0.5;
}

.sharetotwitter, .sharetofacebook, .sharetowhatsapp:hover {
  cursor: pointer;
}

.tags {
  color:#0099db;
}

/*############################################################################
 * articles
 *##########################################################################*/
.articles {
  width: 100%;
  min-height: calc(100vh);
  padding-top: 90px !important;
  padding-bottom: 12px;
}

.articlecontainer {
  display: flex;
  justify-content: center;
}

.articledate {
  margin-top: auto;
  margin-bottom: auto;
  font-size: 1.0em;
  color: #a0a0a0;
}

.articledateandshare {
  display: flex;
  justify-content: space-between;
}

.articleheader {
  font-weight: bold;
  font-size: 2em;
  margin-bottom: 12px; 
}

/*.articleimage,*/
.articletextmain img {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 6px;
}

/*.articleimagesource,*/
.articletextmain div > div:nth-child(2) {
  font-size: 0.9em;
  color: #a0a0a0;
  margin-bottom: 12px;
}

.articletextopening {
  margin-top: 12px;
  font-size: 1.1em;
  color: #808080;
  margin-bottom: 6px;
}

/*.url,*/
.articletextmain a {
  color: var(--primary-color);
}

.citation {
  color:#0099db;
}

.scrollto {
  color:#0099db;
  vertical-align: super;
  font-size: 0.7em;
}

/*############################################################################
 * projects
 *##########################################################################*/
.projectcontainer {
  display: flex;
  justify-content: center;
}

.projects {
  width: 100%;
  min-height: calc(100vh);
  padding-top: 90px !important;
  padding-bottom: 12px;
}

.projectsheader {
  font-weight: bold;
  font-size: 2em;
  margin-bottom: 12px;
}

.projectsimage {
  min-width: 67%;
  max-width: 100%;
  margin-bottom: 12px;
}

.projectsimagecontainer {
  width: 100%;
  text-align: center;
  border: 1px solid #f0f0f0;
  margin-top: 12px;
  margin-bottom: 16px;
}

.projectsimagesource {
  font-size: 0.9em;
  color: #a0a0a0;
  margin-bottom: 6px;
  padding: 0px 6px 0px 6px;
}

.projectstextopening {
  font-size: 1.1em;
  color: #808080;
  margin-bottom: 12px;
}

.projectstextmain {
  font-size: 1em;
}

/*###########################################################################
 * error & cmg
 *#########################################################################*/
.cmg {
  padding-top: 84px !important;
}

.bodycontainer {
  min-height: 100vh;
}

.errortext {
  margin: auto;
  text-align: center;
}

.error404 {
  display: flex;
  justify-content: flex-end;
  margin-top: 78px;
  min-height: calc(100vh - 78px);
}

.footererror {
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--primary-color);
  -webkit-box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.12);
}