/* MolDis shared pages */
:root {
    font-family:Arial,sans-serif;
    color:#171717;
    background:#fff;
  }
  * {
    box-sizing:border-box;
  }
  body {
    margin:0;
  }
  a {
    color:inherit;
  }
  header,main,footer {
    max-width:1331px;
    margin:auto;
    padding:12px 20px;
  }
  .contact {
    height:60px;
    padding:8px 30px;
    background:#f5f5ef;
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
    font-size:15px;
  }
  .contact a {
    text-decoration:none;
  }
  .contact form {
    display:flex;
  }
  .contact input {
    padding:8px;
    max-width:230px;
  }
  .contact button {
    padding:8px;
  }
  .branding {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:103px;
  }
  .branding .moldis-logo {
    width:644px;
    height:95px;
    object-fit:contain;
    object-position:left center;
  }
  .branding .tifr-logo {
    width:180px;
    height:95px;
    object-fit:contain;
    object-position:right center;
  }
  .branding img {
    max-height:95px;
    max-width:100%;
    object-fit:contain;
  }
  nav {
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:4px;
  }
  nav a {
    background:#900;
    color:white;
    text-decoration:none;
    padding:12px 25px;
    font-weight:bold;
  }
  nav a:hover {
    background:#00004d;
  }
  .layout {
    width:calc(100% - 40px);
    max-width:1291px;
    padding:8px 0 12px;
    background:#f5f5ef;
    display:grid;
    grid-template-columns:minmax(300px,531px) minmax(350px,800px);
    gap:0;
  }
  .viewer {
    width:100%;
    height:600px;
    border:0;
    overflow:hidden;
    background:#fff;
  }
  .description {
    padding:25px 30px;
    font-family:"Raleway",Arial,sans-serif;
    font-weight:100;
    line-height:1.5;
    font-size:16px;
    color:#000;
  }
  .description video {
    display:block;
    max-width:100%;
    margin:32px auto;
  }
  footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
  }
  .follow-link {
    display:inline-block;
    align-self:flex-start;
    padding:10px 16px;
    border-radius:20px;
    background:#000;
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
  }
  .follow-link:hover {
    background:#333;
  }
  footer p {
    margin:4px 0;
  }
  .copyright {
    text-align:center;
    color:#888;
    max-width:none;
    padding:16px;
  }
@media (max-width: 780px) {
  .contact {
    height:auto;
    min-height:60px;
  }
  .layout {
    grid-template-columns:1fr;
  }
  .viewer {
    height:600px;
  }
  .description {
    padding:20px 0;
  }
  .branding .moldis-logo {
    max-width:100%;
    height:auto;
  }
  .branding .tifr-logo {
    max-width:130px;
    height:auto;
  }
  nav {
    justify-content:flex-start;
  }
  nav a {
    padding:10px 16px;
  }
}

/* Content frames */
.developers-panel {
    width:calc(100% - 40px);
    max-width:1291px;
    padding:8px 0 12px;
    background:#f5f5ef;
  }
  .developers-content {
    display:block;
    width:100%;
    height:500px;
    border:0;
    background:#f5f5ef;
  }

.datasets-panel {
    width:calc(100% - 40px);
    max-width:1291px;
    padding:8px 0 12px;
    background:#fff;
  }
  .datasets-content {
    display:block;
    width:100%;
    height:1650px;
    border:0;
    background:#fff;
  }

.lab-panel {
    width:calc(100% - 40px);
    max-width:1291px;
    padding:8px 0 12px;
    background:#fff;
  }
  .lab-content {
    display:block;
    width:100%;
    height:1650px;
    border:0;
    background:#fff;
  }

/* Developers content, scoped to its own page */
body.developer-copy
{
	background-color: #f5f5ef;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
	display: block;
	font-family: "Raleway";
}

body.developer-copy font
{
	font-size: 16px;
        font-weight: 100;
        line-height: 1.5em;
        color: #000000;
	font-family: "Raleway";
	text-align: justify;
}

body.developer-copy a:link 
{
    color: blue;
    text-decoration: none;
    cursor: pointer;
}
body.developer-copy a:visited 
{
    color: blue;
    text-decoration: none;
    cursor: pointer;
}
body.developer-copy a:hover 
{
    color: blue;
    text-decoration: none;
    cursor: pointer;
}

body.developer-copy a:active 
{
    color: blue;
    text-decoration: none;
    cursor: pointer;
}