@import url('https://rsms.me/inter/inter.css');

@font-face {
	font-family: 'Metropolis-Bold';
	src: url('../fonts/EOT/Metropolis-Bold.eot'); /* IE9 Compat Modes */
	src: url('../fonts/EOT/Metropolis-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/WOFF2/Metropolis-Bold.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/WOFF/Metropolis-Bold.woff') format('woff'), /* Pretty Modern Browsers */
		 url('../fonts/TrueType/Metropolis-Bold.ttf')  format('truetype') /* Safari, Android, iOS */
}

/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

* {
	padding: 0px;
	margin: 0px;
}

body, html {
	padding: 0px;
	margin: 0px;
	background-color: #fff;	
	height:100%;
}

body {
	overflow-x: hidden;	
}

/* Text */

p, span, label, h1, h2, h3, h4, h5, h6 {
	color: #fff;
}

p {
	font-size: 14px;
	line-height: 150%;
	font-family: 'Inter var', sans-serif;
}

table, tr, th, td {
	font-size: 12px;
	white-space: nowrap;
}	

label {
	font-size: 10px;
	line-height: 150%;	
}

p.small {
	font-size: 10px;
	color: #ddd;
}

p.small-desc {
	font-size: 10px;
	color: #33322e;	
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Metropolis-Bold', sans-serif;
}

h1 {
	font-size: 2rem;
	/* text-transform: uppercase; */
	line-height: 110%;
}

h2 {
	font-size: 1.75em;
}

h3 {
	font-size: 1.5em;
}

h5 {
	font-size: 1.2rem;
}

ul.menu {
	color: #7542e5;
	padding-left: 20px;
	font-size: 14px;
}

@media (min-width: 992px) {
	p {
		font-size: 18px;
		line-height: 150%;
		padding-bottom: 10px;
	}

	table, tr, th, td {
		font-size: 14px;
	}	
	
	label {
		font-size: 12px;
		line-height: 150%;	
	}
	
	p.small {
		font-size: 12px;
	}

	h1 {
		font-size: 4rem;
		margin-bottom: 25px;	
	}

	h2 {
		font-size: 3.5em;
		margin-bottom: 20px;	
		line-height: 110%;
	}

	h3 {
		font-size: 3em;
		margin-bottom: 20px;	
		line-height: 110%;
	}

	h5 {
		font-size: 2rem;
		line-height: 110%;
	}
	ul.menu {
		font-size: 14px;
	}	
}

a {
	/* color: #ff7139; */
	color: #7542e5;
	font-weight: bold;
}

a:hover {
	/* color: #ff7139; */
	color: #7542e5;
}

.bg-black {
	background-color: #000;
}

.bg-purple {
	background-color: #20123a;
}

/* Graph  */
#static-graph-header {
	background-color: #000;
	padding: 50px 0 10px 0;		
}
#graph-header {
	background-color: #20123a;
	padding: 50px 0 10px 0;	
}
.graph-holder {
	background-color: #20123a;
}
.graph-holder p {
	font-size: 14px;
	line-height: 150%;
	font-family: 'Inter var', sans-serif;
}
.graph-holder a.scroll-down, .graph-holder a.scroll-down:hover {
	color: #7542e5;
}
.graph-menu {}

#graph-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.loading {
	width: 100%;
	height: 100%;
	background-color: #20123a;
	text-align: center;
}

.loading button {
}

#cycle {
	position: absolute;
	top: 10px;
	right: 15px;
}

#graph-timeframe {
	position: absolute;
	bottom: 10px;
	right: 5px;
	width: 250px;
}

#graph-timeframe span {
	font-size: 10px;
	line-height: 100%;
	color: #fff;
	font-family: 'Inter var', sans-serif;	
}

.segment-textual {
	display: none;
}
@media (min-width: 768px) { 
	.segment-textual {
		display: block;
	}	
	.segment-dropdown {
		display: none;
	}		
}

.badge-casual {
	background-color: rgb(255,212,103,1);
	color: #fff;
}

.badge-regular {
	background-color: rgb(1,144,237,1);
	color: #fff;
}

.badge-core {
	background-color: rgb(255,46,137);
	color: #fff;
}

.badge-project {
	background-color: rgb(255,255,255);
	color: #000;
}

.badge-affiliations {
	background-color: #ddd;
	color: #000;
}

.badge:hover {
	color: rgb(0,0,0,0.8);
}


.badge-legend:hover {
	color: #fff;
}
.badge-static-fx {
	background-color: #ff7dfc;
}

.badge-static-mdn {
	background-color: #00c756;
}

.badge-static-thunderbird {
	background-color: #ff840e;
}

.badge-static-gecko {
	background-color: #00cce4;
}

.badge-static-rust {
	background-color: #6e6a58;
}

.badge-static-addons {
	background-color: #45a5f7;
}

.badge-static-webp {
	background-color: #ff6381;
}

.badge-static-fxandroid {
	background-color: #9ab300;
}

.badge-static-others {
	background-color: #d0d0d0;
}


.badge-external-yellow {
	background-color: #ffd95d;
}
.badge-external-green {
	background-color: #00be93;
}
.badge-external-blue {
	background-color: #8fd3ff;
}
.badge-external-orange {
	background-color: #ff962a;
}
.badge-external-purple {
	background-color: #c422ff;
}
.badge-external-pink {
	background-color: #ff4392;
}


.badge-static-casual {
	background-color: #f9ec6e;
}
.badge-static-regular {
	background-color: #4abe8b;
}
.badge-static-core {
	background-color: #294758;
}



/* Read more and methodology */

.black-text, #methodology p, #methodology h1, #methodology h2, #methodology h3, #methodology h4, #methodology h5, #methodology h6 {
	color:#000;
}

#data-sources p, #data-sources h1, #data-sources h2, #data-sources h3, #data-sources h4, #data-sources h5, #data-sources h6 {
	color:#000;
}

#methodology a, #methodology a:hover, #data-sources a, #data-sources a:hover {
	color: #7542e5;
}

.bg-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;	
	height: 100%;
	width: 100%;
}

.static-project {
	background-image: url("../images/1x/global_projects_1440p_bArtboard\ 1-100.jpg");	
}

.external {
	background-image: url("../images/1x/external_reposArtboard\ 1.png");
}

.external-org-bg {
	background-image: url("../images/1x/external_orgArtboard\ 1.png");
	background-position: left;
	background-repeat: no-repeat;
	background-size: cover;	
	height: 100%;
	width: auto;	
}

.firefox-bg {
	background-image: url("../images/1x/fx_fullbleed_Artboard\ 1.png");
	background-position: left;
	background-repeat: no-repeat;
	background-size: cover;	
	height: 100%;
	width: auto;	
}

/* Modal */

#projectModal {
  position: relative;
}

#projectModal h5 {
	color: #20123a;
	text-transform: capitalize;
}
#projectModal p, #projectModal span  {
	color: #20123a;
	font-family: 'Inter var', sans-serif;
}

.modal-header {
	cursor: grab;
}

.modal-dialog {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 10px;
}

.footer {
	background-color: #000;
	height: 10%;
}


/* Specific elements with media queries */

.mouse-wheel-switch, #cycle {
	display: none;
}

@media (min-width: 768px) {
	.mouse-wheel-switch, #cycle {
		display: block;
	}
}

/* Switch button */


.switch {
	font-size: 1rem;
	position: relative;
  }
  .switch input {
	position: absolute;
	height: 1px;
	width: 1px;
	background: none;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	padding: 0;
  }
  .switch input + label {
	position: relative;
	min-width: calc(calc(2.375rem * .8) * 2);
	border-radius: calc(2.375rem * .8);
	height: calc(2.375rem * .8);
	line-height: calc(2.375rem * .8);
	display: inline-block;
	cursor: pointer;
	outline: none;
	user-select: none;
	vertical-align: middle;
	text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem);
  }
  .switch input + label::before,
  .switch input + label::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(calc(2.375rem * .8) * 2);
	bottom: 0;
	display: block;
  }
  .switch input + label::before {
	right: 0;
	background-color: #dee2e6;
	border-radius: calc(2.375rem * .8);
	transition: 0.2s all;
  }
  .switch input + label::after {
	top: 2px;
	left: 2px;
	width: calc(calc(2.375rem * .8) - calc(2px * 2));
	height: calc(calc(2.375rem * .8) - calc(2px * 2));
	border-radius: 50%;
	background-color: white;
	transition: 0.2s all;
  }
  .switch input:checked + label::before {
	background-color: #7542e5;
  }
  .switch input:checked + label::after {
	margin-left: calc(2.375rem * .8);
  }
  .switch input:focus + label::before {
	outline: none;
	box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
  }
  .switch input:disabled + label {
	color: #868e96;
	cursor: not-allowed;
  }
  .switch input:disabled + label::before {
	background-color: #e9ecef;
  }
  .switch.switch-sm {
	font-size: 0.875rem;
  }
  .switch.switch-sm input + label {
	min-width: calc(calc(1.9375rem * .8) * 2);
	height: calc(1.9375rem * .8);
	line-height: calc(1.9375rem * .8);
	text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem);
  }
  .switch.switch-sm input + label::before {
	width: calc(calc(1.9375rem * .8) * 2);
  }
  .switch.switch-sm input + label::after {
	width: calc(calc(1.9375rem * .8) - calc(2px * 2));
	height: calc(calc(1.9375rem * .8) - calc(2px * 2));
  }
  .switch.switch-sm input:checked + label::after {
	margin-left: calc(1.9375rem * .8);
  }
  .switch.switch-lg {
	font-size: 1.25rem;
  }
  .switch.switch-lg input + label {
	min-width: calc(calc(3rem * .8) * 2);
	height: calc(3rem * .8);
	line-height: calc(3rem * .8);
	text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
  }
  .switch.switch-lg input + label::before {
	width: calc(calc(3rem * .8) * 2);
  }
  .switch.switch-lg input + label::after {
	width: calc(calc(3rem * .8) - calc(2px * 2));
	height: calc(calc(3rem * .8) - calc(2px * 2));
  }
  .switch.switch-lg input:checked + label::after {
	margin-left: calc(3rem * .8);
  }
  .switch + .switch {
	margin-left: 1rem;
  }