@font-face {
  font-family: Staatliches;
  src: url('https://static.igem.wiki/teams/4819/wiki/fonts/staatliches-regular.ttf') format('truetype');
}

@font-face {
  font-family: DM Sans;
  src: url('https://static.igem.wiki/teams/4819/wiki/fonts/dmsans-variablefont-opsz-wght.ttf') format('truetype');
}

#btn-back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;
  background-color: #8362a8;
  color: white;
  font-size:1em;
  padding-bottom:0.5em;
}

body { padding-top: 56px; font-family: 'DM Sans', sans-serif;}
.homepage-hero { background-color: white; }
h1 { font-family: 'Staatliches', cursive; }

/* NavBar Styling */

body{padding-top:10px;}
.navbar-nav {height:100vh;}
.navbar-brand{padding:0px; margin:0px;}
.navcontainer{max-width: 98%;}
.navbar{background-color: transparent !important;}
.navbar-light.color-changed{background-color:white !important;}
body.color-changed{overflow-y:hidden;}
.nav-link {padding-top:5px; padding-bottom:5px; font-size:1.5em;}
.project-category{padding-top:50px;}
.navbar-nav > h1 {color:#8362a8;}
.navrow {margin-left: 4em;}
.positions img {margin-left:0.5em; margin-right:0.5em; margin-top:0.5em;}

.textpage-headline{color: white; font-size: 90px; }
.headline-quote{color:white; font-size: 30px;}
.textpage-hero {background-color:#8362a8; margin-bottom:3em; height:50vh;}

.independentcard {margin-top: 1.5em; margin-bottom:1.5em;}

.contents{color:#8362a8;}
.nav-pills .nav-link.active {background-color:#8362a8;}
.nav-tabs .nav-link {color: #8362a8;}


/* Teampage */
.teams-hero { height:100%;}
.team-photos h1 {color:#421d6d;}
.team-photos h2 {color:#421d6d;}
.team-photos h3 {color:#8362a8;}
.textright {text-align: right;}
.team-headline {color: #8362a8; font-size: 90px; margin-left:2em;}
.carousel {width:75%;}
.carousel-caption {background-color:#8362a8; color:white;}

/* Home page styling */
.black-text { color: black; }
.headline {color: #8362a8; font-size: 90px; padding-bottom: 50px;}
.headline-small {color: #8362a8; font-size: 70px; padding-bottom: 50px;}
.headline-subheading {color: black; font-size: 50px;}
.headlinebottom {color: #8362a8; font-size: 70px; text-align:center;}
.headlineinside {color: white; font-size: 70px; text-align:center;}
.maptext {text-align:center;}
.herolines { border: 10px solid !important; color: #8362a8 !important; opacity: 100% !important;}
.numbercases {background-color: #8362a8; padding-top: 5em; padding-bottom: 5em;}
#casesvalue {font-size: 100px;}
.diseases {font-size: 60px;}
.ntddescr{color:white; text-align:center;}
.solution{color:black; font-family: 'Staatliches', sans-serif; text-align:center; font-size: 50px;}
.solutionname{color:#8362a8; text-align:center; font-size: 70px;}

.come-in-left {
  transform: translateX(-150px);
  animation: come-in-left 0.8s ease forwards;
}
.come-in-left:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateX(0);
  animation: none;
}

@keyframes come-in-left {
  to { transform: translateX(0); }
}

.come-in-right {
  transform: translateX(150px);
  animation: come-in-right 0.8s ease forwards;
}
.come-in-right:nth-child(odd) {
  animation-duration: 0.6s;
}

@keyframes come-in-right {
  to { transform: translateX(0); }
}

.zoom {
  transition: transform .2s;
}

.zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}

/* footer */
footer {background-color:white;}
footer a { color: black; font-weight: bold; text-decoration: none;}
footer a:hover { color: grey; text-decoration: underline; }
.subfoot{text-align:center;}
.logoaccom {font-family: 'Staatliches', cursive; font-size: 2em; margin-left: 1em; margin-right:1em;}

i.socialmedia {
  padding-bottom: 13px; 
  padding-top: 13px; 
  padding-right: 18px; 
  padding-left: 18px;
  font-size: 35px;
  width: 30px;
  margin: 7px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  background: #8362a8;
  color: white;
}

i.socialmedia:hover {opacity: 0.7;}

.bottomfooter {margin-top:2em;}



/* Home map CSS begins */
  
div, img, footer {
position: relative;
box-sizing: border-box;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.centered-y {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}

.distribution-map {
position: relative;
width: 75%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 5px solid #421d6d;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}

/* Home map CSS ends */