/* Fonts */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-stretch: normal;
    font-display: swap;
    src: url(../css/fonts/open-sans.ttf) format('truetype');
}

/* Header Elements */
header{
    margin-top: 1%;
    display:block
}

.header ul {
    font-family: Arial, Helvetica, sans-serif;
    font-size:smaller;
    width: 100%;
    display: flex;
    padding: 20px;
    margin-left: -25px;
    width: 100%;
    list-style: none;
    background: #f6f6f6;
}

.header li {
    flex: 1 0 auto;
}

.header ul a {
    display: block;
    color: black;
    text-decoration: none;
    text-align: center;
}

.header a:hover {
    color:#0fa69c ;
}

.small-menu{
    font-family: Arial, Helvetica, sans-serif;
    font-size:smaller;
    margin-top: 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    text-decoration: none;
    padding-bottom: 15px;
}

.hamburgermenu{
    font-size: 25px !important ;
    padding-left: 6%;
    border: none;
    color:#0fa69c ;
    background-color: #f6f6f6;
}

.hamburgermenu button{
    border: none;
}

.hamburgermenu:hover{
    color:#003e6d;
    background-color: #f6f6f6;
}

.menuItems{
    background-color: #f6f6f6;
    width: 100%;
    align-content: center;
}

.menuItems a{
    margin: 2px;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    color: black;
    text-decoration: none;
    padding-left: 5%;
    padding-bottom: 15px;
}

body {
    height: 100%;
}
  
.fixed-wrapper {
    height: 100%;
}
  
  .fixed-bg {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    color: white;
    text-align: center;
    display: table;
  }
  
  .scroll-bg {
    background-color: rgba(255, 255, 255, 0.719);
    font-size: 100%;
    margin: 7%;
    margin-left: auto;
    margin-right: auto;
    height: 50%;
    width: 40%;
    color: black;
    padding: 1.5%;
    display: inline-block;
    vertical-align: middle;
  }

  .scroll-bg button{
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    border-radius: 10px;
    
  }
  
  .bg-1 {
    background-image: url('../images/misc-graphics/covid19-1600x900.webp');
    
  }
  
/* Footer Elements */
footer{
    font-family: Arial, Helvetica, sans-serif;
    font-size:smaller;
    background-color: #f6f6f6;
    padding: 50px;
    margin-left: -15px;
    margin-right: -25px;
    margin-bottom: -25px;
}

.footer img{
    height:30px;
    margin-left:5px;
    margin-bottom: 5px;
    display: flex; 
    margin-right: 0;
}

.footer .p-left{
    color:grey;
}

.footer a {
    color:#0fa69c ;
    text-decoration: none;
    text-align: center;
}

.footer a:hover {
    color:#003e6d;
}


.socials {
    transform: translateY(-150%);
    display: flex; 
    justify-content: center;
}

.x-el-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

.team{
    flex-wrap: wrap;
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
}

.team .item {
    padding-left: 5px;
    padding-right: 5px;
}

.team img{
    width:250px;
    object-fit:scale-down;
    flex-wrap: wrap;
    margin: 1em;
    display: block;
}

.item span {
    font-family: Arial, sans-serif;
    display: block;
    padding-bottom: 25px;
    text-align: center;
}

.item h4{
    color: black;
    font-weight: bold;
    padding-bottom: 0;
}

.item p{
    padding-top: 0;
    color:rgb(156, 156, 156) ;
}

h1{
    font-family: 'Open Sans';
    text-align: center;
    color:#0fa69c
}

h2{
    font-family: Arial, sans-serif;
    font-weight:200 ;
}

h3{
    font-family: Arial, sans-serif;
    font-weight:100 ;
}

p{
    font-family: Arial, sans-serif;
    font-weight:200 ;
    text-align: center;
}

.loose-text {
    margin: 5%;
    margin-top: 2.5%;
    margin-bottom: 1%;
    font-family: Arial, sans-serif;
    font-weight:200 ;
    text-align: justify;
    text-align-last: center;
}

.loose-text a{
    color: #0fa69c ;
    text-decoration: none;
}

.loose-text a:hover{
    color:#003e6d;
}

.loose-text button{
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 1.5%;
    border-radius: 10px;
    width: 40%;
}

hr{
    width: 50px;
    size: 3;
}

.dot-list li{
    list-style-type: disc ;
    line-height: 25px;
    font-family: Arial, sans-serif;
    font-weight:200 ;
}

li{
    list-style-type: none ;
    font-family: Arial, sans-serif;
    font-weight:200 ;
}
ul a {
    color:#0fa69c ;
    text-decoration: none;
}

ul a:hover {
    color:#003e6d;
}

#flex-container{
    width:100%;
    display: flex;
    align-items: flex-start;
}

#flex-container button{
    padding: 25px;
    font-size: large;
    margin-left: 5%;
    width: auto;
    border-radius: 5px;
}

.flex-wrapper {
    position: relative;
    flex: 1;
}

.left-element{
    padding-left: 5%;
    position: absolute;
    width: 100%;
    font-family: Arial, sans-serif;
    font-weight:200 ;
    text-align: justify;
}

.right-element{
    margin-right: 5%;
    font-family: Arial, sans-serif;
    font-weight:200 ;
    text-align: justify;
    width: 70%;
}

.left-element2{
    padding-left: 5%;
    position: absolute;
    width: 100%;
    font-family: Arial, sans-serif;
    font-weight:200 ;
    text-align: justify;
}

.right-element2{
    margin-right: 5%;
    font-family: Arial, sans-serif;
    font-weight:200 ;
    text-align: justify;
    margin-left: 2.5%;
    width: 50%;
}

#container{
    display: flex;
    align-items: flex-start;
}

.left-wrapper {
    position: relative;
    flex: 1;
}

.left {
    position: absolute;
    width: 100%;
}

.right {
    float: inline-start;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    margin-right: 5%;
}

.collaborator-list{
    color:rgb(100, 100, 100);
    font-family: Arial, sans-serif;
    text-align: justify;
    text-overflow: wrap;
    margin-right: 5%;
}

h6{
    font-family: 'Open Sans';
    font-size: 1.5em; 
}

.h7{
    color:rgb(100, 100, 100);
    font-family: Arial, sans-serif;
    text-align: justify;
    text-overflow: wrap;
    font-size: 1.5em; 
}
.h8{
    color:rgb(100, 100, 100);
    line-height: 0%;
}


#contact-form {
    
    max-width: 1208px;
    max-width: 75.5rem;
    margin: 3%;

}

label > span, input, textarea, button {
    box-sizing: border-box;
}

label {
    display: block;
}

label > span {
    display: none;
}

input, textarea, button {
    width: 100%;
    padding: 0.5em;
    border: none;
    font: 300 100%/1.2 Arial, sans-serif;
}

input[type="text"], input[type="email"], textarea {
    margin: 0 0 1em;
    border: 1px solid #ccc;
    outline: none;
}

input.invalid, textarea.invalid {
    border-color: #d5144d;
}

textarea {
    height: 6em;
}

input[type="submit"], button {
    background-color:#0fa69c ;
    color: white;
    float: left;
}

input[type="submit"]:hover, button:hover {
    background: #003e6d;
}

aside p{
    text-align: left;
    vertical-align: top;
}

h4{
    font-family: Arial, sans-serif;
    font-weight: bold ;
    font-size: 20px;
}

h4 a{
    color: #0fa69c ;
    text-decoration: none;
}

.youtube-container {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.youtube-video {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0% ;
    margin-left: 12.5%;
    width: 75%;
    height: 75%;
}

.container {
    position: relative;
    overflow: hidden;
    width: 90%;
    padding-top: 56.25%; 
    margin-left: 5%;
    margin-right: 5%;
    background-color: lightgrey;
    border: 2px darkgrey solid;
    border-radius: 10px;
}
  
.responsive-iframe {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    
}

.column {
    float: left;
    width: 44%;
    padding: 3%;
    padding-top: 0%;
}


.column-altmetric{
    float: left;
    width: auto;
    padding: 3%;
    padding-top: 0%;
}

.column img{
    width: 100%;
}

.sci-publications{
    margin: 5%;
    margin-top: 2.5%;
    margin-left: 30%;
    margin-right: 10%;
    margin-bottom: 1%;
    font-family: Arial, sans-serif;
    font-weight:200 ;
    text-align: justify;
    text-align-last: left;
}

.sci-publications a{
    color: #0fa69c ;
    text-decoration: none;
}

.sci-publications a:hover{
    color:#003e6d;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.download .btn{
    background-color: #00acee;
    border: none;
    color: white;
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    cursor: pointer;
    font-size: large;
    border-radius: 10px;
}
  
.download .btn:hover {
    background-color: #0e76a8;  
}

.partners{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.partners img{
    margin: 2.5%;
    width: 19%;
    height: 19%;
    object-fit: cover;
}

.partners .last-row{
    text-align:center;
    margin:auto;
}

.partners .last-row img{
    margin: 2.5%;
    width: 10%;
    object-fit: cover;
}

.collapsible {
    padding: 1.5rem;
}

.collapsible details {
    border: 1px solid #ddd;
    background: #fff;
    margin-bottom: .5rem;
    border-radius: 0.35rem;
}

.collapsible summary {
    color: #003e6d;
    font-family: Arial, sans-serif;
    font-weight:bold ;
    font-size: 1.5em;
    cursor: pointer;
    padding: 1rem;
}

.collapsible div {
    padding: 1rem 1.5rem;
}

/* Misc Content Elements */
.x-el-audio, .x-el-canvas, .x-el-progress, .x-el-video{
    display:inline-block;
    vertical-align:baseline
}

.x-el-audio:not([controls]){
    display:none;height:0
}

/* What you see while the website is loading up content */
.x-el-template{
    display:none
}

/* Link Styles */
.x-el-a{
    background-color:transparent;
    color:inherit
}

.x-el-a:active, .x-el-a:hover{
    outline:0
}

/* How the site should handle abbreviating */
.x-el-abbr[title]{
    border-bottom:1px dotted
}

/* Bold and Strong Text */
.x-el-b, .x-el-strong{
    font-weight:700
}

/* Defintion Text */
.x-el-dfn{
    font-style:italic
}

/* Highlighted Text */
.x-el-mark{
    background:#ff0;
    color:#000
}

/* Smaller Text */
.x-el-small{
    font-size:80%
}

/* Subscript and Superscript Text */
.x-el-sub, .x-el-sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}

.x-el-sup{
    top:-.5em
}

.x-el-sub{
    bottom:-.25em
}

/* Formatting Images */
.x-el-img{
    vertical-align:middle;
    border:0
}

/* Containers for SVGs */
.x-el-svg:not(:root){
    overflow:hidden
}

/* Containers for Figures */
.x-el-figure{
    margin:0
}

/* Preformatted Text */
.x-el-pre{
    overflow:auto
}

/* More Misc Content Styles - Coding Adjacent */
.x-el-code, .x-el-kbd, .x-el-pre, .x-el-samp{
    font-family:monospace,
    monospace;
    font-size:1em
}

/* Button Related Styles */
.x-el-button, .x-el-input, .x-el-optgroup, .x-el-select, .x-el-textarea{
    color:inherit;
    font:inherit;
    margin:0
}

.x-el-button{
    overflow:visible
}

.x-el-button, .x-el-select{
    text-transform:none
}

.x-el-button, .x-el-input[type=button], .x-el-input[type=reset], .x-el-input[type=submit]{
    -webkit-appearance:button;
    cursor:pointer
}

.x-el-button[disabled], .x-el-input[disabled]{
    cursor:default
}

.x-el-button::-moz-focus-inner,.x-el-input::-moz-focus-inner{
    border:0;
    padding:0
}
.x-el-input{
    line-height:normal
}
.x-el-input[type=checkbox], .x-el-input[type=radio]{
    box-sizing:border-box;
    padding:0
}

.x-el-input[type=number]::-webkit-inner-spin-button, .x-el-input[type=number]::-webkit-outer-spin-button{
    height:auto
}

.x-el-input[type=search]{
    -webkit-appearance:textfield;
    box-sizing:content-box
}

.x-el-input[type=search]::-webkit-search-cancel-button, .x-el-input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}

.x-el-optgroup{
    font-weight:700
}

.x-el-select:not([multiple]){
    vertical-align:middle
}

.x-el-textarea{
    line-height:1.75;
    padding:.5em
}

/* Form Styles */
.x-el-textarea{
    border:0
}

.x-el-fieldset{
    border:1px solid silver;
    margin:0 2px;
    padding:.35em .625em .75em
}

.x-el-fieldset, .x-el-input, .x-el-select, .x-el-textarea{
    margin-top:0;
    margin-bottom:0
}

.x-el-fieldset, .x-el-input[type=email], .x-el-input[type=text], .x-el-textarea{
    width:100%
}

.x-el-label{
    vertical-align:middle
}

.x-el-input{
    border-style:none;
    padding:.5em;
    vertical-align:middle
}

.x-el-textarea{
    overflow:auto
}

/* Table Styles */
.x-el-legend{
    border:0;
    padding:0
}

.x-el-table{
    border-collapse:collapse;
    border-spacing:0
}

.x-el-td, .x-el-th{
    padding:0
}

/* Ordered List */
.x-rt ol, .x-rt ul{
    text-align:left
}

/* Hide elements when the screen is too small */
.x-el.d-none{
    display:none!important
}


/* Footer Styles */
.sideline-footer{
    margin-top:auto
}

/* Scrolling Control */
.disable-scroll{
    touch-action:none;
    overflow:hidden;
    position:fixed
}



/* Webkit and Screen Size Stuff */
@-webkit-keyframes loaderscale{
    0%{
        transform:scale(1);
        opacity:1
    }
    45%{
        transform:scale(.1);
        opacity:.7
    }
    80%{
        transform:scale(1);
        opacity:1
    }
}@keyframes loaderscale{
    0%{
        transform:scale(1);
        opacity:1
    }
    45%{
        transform:scale(.1);
        opacity:.7
    }
    80%{
        transform:scale(1);
        opacity:1
    }
}

/* SVG Loading Styles */
.x-loader svg{
    display:inline-block
}

.x-loader svg:first-child{
    -webkit-animation:loaderscale .75s cubic-bezier(.2,.68,.18,1.08) -.24s infinite;
    animation:loaderscale .75s cubic-bezier(.2,.68,.18,1.08) -.24s infinite
}

.x-loader svg:nth-child(2){
    -webkit-animation:loaderscale .75s cubic-bezier(.2,.68,.18,1.08) -.12s infinite;
    animation:loaderscale .75s cubic-bezier(.2,.68,.18,1.08) -.12s infinite
}

.x-loader svg:nth-child(3){
    -webkit-animation:loaderscale .75s cubic-bezier(.2,.68,.18,1.08) 0s infinite;
    animation:loaderscale .75s cubic-bezier(.2,.68,.18,1.08) 0s infinite
}

.x-icon>svg{
    transition:transform .33s ease-in-out
}

.x-icon>svg.rotate-90{
    transform:rotate(-90deg)
}

.x-icon>svg.rotate90{
    transform:rotate(90deg)
}

.x-icon>svg.rotate-180{
    transform:rotate(-180deg)
}

.x-icon>svg.rotate180{
    transform:rotate(180deg)
}

/* Misc Behaviors */
.x-rt:after{
    content:"";
    clear:both
}

.x-rt br{
    clear:both
}

.mte-inline-block{
    display:inline-block
}

/* More Browser/Screen Specifications */
@media only screen and (min-device-width:1025px){
    :root select,_::-webkit-full-page-media,_:future{
        font-family:sans-serif!important
    }
    .small-menu {
        display: none;
    }
    .nav-button {
        display: block;
    }
      
    #contact-form {
        text-align: justify;
        line-height: 0;
    }
    
    #contact-form:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
      
    #contact-form form{
        vertical-align: top;
        display: inline-block;
        width: 65%;
        text-align: left;
        line-height: 1.5;  
    }
      
    #contact-form aside {
        vertical-align: top;
        display: inline-block;
        width: 30%;
        text-align: left;
        line-height: 1.5;
    }

}

@media only screen and (max-width: 1025px) {
    .small-menu {
      display: block;
    }
    
    .header ul {
        background-color: white;
        padding: 0;
    }
    .nav-button {
      display: none;
    }

    .p-left{
        text-align: center;
    }

    .socials {
        flex-direction: row;
        margin-top: 5%;
        transform: translateY(0%);
    }
    .footer{
        background-color: #f6f6f6;
        padding-bottom: 100px;
    }
    .x-el-center{
        width:100%
    }

    #contact-form {
        line-height: 0;
    }
    
    #contact-form:after {
        content: '';
        width: 100%;
    }
      
    #contact-form form{
        vertical-align: top;
        text-align: left;
        line-height: 1.5;
        width: 100%;  
    }
      
    #contact-form h4{
        width: 100%;
        margin-top: 20px;
        text-align: center;
    }
  
    #contact-form aside {
        text-align: center;
        width: 100%;
        vertical-align: top;
        line-height: 1.5;
    }

    #contact-form p {
        text-align: center;
        width: 100%;
        vertical-align: top;
        line-height: 1.5;
    }

    .flex-container{
        flex-direction: column;
    }

    .right-element{
        width: 100%;
    }

    .left-element{
        display: none;
    }

    .right-element2{
        width: 100%;
    }

    .left-element2{
        display: none;
    }

    .column {
        width: 100%;
    }

    .column-altmetric{
        display: inline-block;
        margin-left: 40%;
        margin-right: 40%;
        width: 20%;
        padding: 3%;
        margin-top: 1%;
    }

    .sci-publications {
        margin: 2.5%;
    }

    .column img{
        display: none;
    }

    .loose-text button{
        margin-top: 1.5%;
        width:80% ;
        margin-left:10%
    }

    .download button{
        margin-top: 1.5%;
        width:80% ;
        margin-left:10%;
        margin-bottom: 3%;
    }

    .scroll-bg {
        width: 80%;
        padding-bottom: 5%;
    }

    .right-element2 ul li .h8{
        margin-top: 0;
        text-align: center;
    }
    
    .right-element2 button{
        display: none;
    }

  }

  @media only screen and (max-device-width: 823px) {
    .small-menu {
      display: block;
    }
    .bg-1 {
        background: no-repeat center; 
        background-image: url('../images/misc-graphics/covid19-1600x900.webp');
      }
    .nav-button {
      display: none;
    }
    .socials {
        display: flex;
        flex-direction:row;
    }
    .footer{
        background-color: #f6f6f6;
        padding-bottom: 150px;
        text-align: center;
    }
    .x-el-center{
        width:50%;
        margin-top: 5%
    }
  }