html {
  	scroll-behavior: smooth;
}


body{
	background-color: #fff;
	font-family: "Myriad Pro", Helvetica, Arial, "sans-serif";
	position: relative;
	padding: 0;
	margin: 0;
	color: #000;
	font-size: 2.5em;
	min-height: 1300px; /* needed for portrait iPhones */ 
	overscroll-behavior: contain;
	}
img {
	width: 100%;	
  	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
	}	
hr{
	clear: both;
	padding: 0;
	margin: 1.5em 0 0 0;
    height: .1em;
    border: 0;
    border-top: .1em solid #ccc; 
	}
.dotted{
	margin: 1em 0 0 0;
	border-top: .1em dotted #ccc;
	}

h1{
	padding: .25em 0 0 0;
	margin: 0;
	font-size: 1.75em;
	line-height: 1em;
	font-weight: bold;
	color: #8C1D40;
	}
h2{
	font-weight: normal;
	font-size: 1.45em;
	padding: 1em 0 0 0;
	margin: 0;
	}
h3{
	font-weight: bold;
	font-size: 1.15em;
    padding: 1em 0 .4em 0;
	margin: 0;
	}
ul{
	padding: 0 0 0 1em;
	}
li{
	line-height: 1.15em;
	padding: .2em 0 .2em 0;
	}

/* general table styles */ 
table{
	width: 100%;
	border: 3px solid #939393;
	border-collapse: collapse;
	}
thead{
	background-color: #939393;
	color: #fff;
	}
thead td {
	border: 2px solid #939393;
	width: 16.5%;
	text-align: center;
	padding: .4em 0 .2em 0;
	}
tbody td {
	border: 2px solid #939393;
	width: 16.5%;
	text-align: center;
	padding: .2em 0 0 0;
	font-size: .9em;
	}
tbody td:nth-child(1){
	font-weight: bold;
	}	
iframe{
	margin: 1em 0 2em 0;
	width: 850px;
	height: 479px;
	border: 1px solid #ccc;
	}	
.no-input{
	pointer-events: none;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	}
.clear{
	clear: both;
	}		
/* PRINT ------------------- */
.no-print{
	display: block;
	}
.print-only{
	display: none;
	}

/* MAIN LINKS ------------------- */ 
a:link, a:visited, a:focus, .link{
	color: #0097fe;
	text-decoration: none;
	cursor: pointer;
	}
a:hover, .link:hover, .sublink:hover{
	color: #6cb9ff;
	}
.sublink{
	color: #0097fe;
	text-decoration: none;
	cursor: pointer;
	}	
.sublink.active, .sublink.active:hover {  
	color: #8C1D40;
	}		
.red{
	color: #c90000;
	}
.link.red:hover{
	color: #ff0000;
	}
.error{
	color: #ff0000;
	font-weight: bold;
	}
/* MAIN BUTTONS ------------------- */
#button-wrapper{
	margin-top: 4em;
	clear: both;
	}
.main-button{
	display: inline-block;
	position: relative;
	padding: .3em .7em .3em .7em;
	margin: 0 0 .3em 0;
	background-color: #AEDAFF;
	border: none;
	border-radius: 1.25em;
	font-weight: bold;
	font-size: .95em;
	cursor: pointer;
	outline: 0;
	}
.main-button:hover{
	background-color: #83CDFF;
	z-index: 50;
	}
/* main button red version */
.main-button.red-button{
	background-color: #ffb8b8;
	}
.main-button.red-button:hover{
	background-color: #fcacac;
	}	

.main-button.right{
	float: right;
	}

/* wrapper for bottom buttons */
#bottom-button-wrapper{
	margin-top: 2em;
	text-align: center;
	width: 100%;
	clear: both;
	}		

/* MAIN PAGE WRAPPERS ------------------- */

/* main wrapper */
#outer-wrapper{
	position: relative;
	margin: 3em auto 0 auto;
	width: 900px;
	}
#outer-wrapper.index{
	padding-top: 0;
	}	

/* inner container for most pages */ 
.basic-wrapper{
	margin: 0 .5em 0 .5em;
	padding: .75em 0 0 0; 
	position: relative;
	}

/* HEADER ------------------- */
#header-wrapper{
	position: fixed;
	top: 0;
	width: 900px;
	left: 50%;
	margin: 0 0 0 -450px;
	background-color: #ffffff;
	z-index: 200;
	border-bottom: .125em solid #000
	}
#header-wrapper-inner {
	margin: 0 auto;
	max-width: 900px;
	position: relative;
	}	
#header-wrapper.sticky {
	position: fixed;
	}	
/* Breadcrumbs ------------------- */
#breadcrumbs{
	margin: .7em .5em .5em .5em;
	display: inline-block;
	}
#breadcrumbs span{
	font-weight: bold;
	}	
/* Main Menu ------------------- */
#main-menu-wrapper ul{
	font-weight: bold;
	padding: 0;
	margin: 0;
	display: none;
	}
#main-menu-wrapper li{
	list-style-type: none;
	padding: .5em .5em .5em .5em;
	border-top: .05em solid #ccc; 
	}
#main-menu-wrapper li.active{
	background-color: #d4edff;
	}
#main-menu-wrapper li.active a:link, #main-menu-wrapper li.active a:visited, #main-menu-wrapper li.active a:hover{
	color: #000;
	}

/* Hamburger icon ------------------- */
#menu-icon-wrapper {
	display: inline-block;
	cursor: pointer;
	margin: .4em .75em 0 0;
	width: 1.5em;
	float: right;
	}
.hamburger-bar-1, .hamburger-bar-2, .hamburger-bar-3 {
	height: .2em;
    background-color: #ccc;
    margin: .25em 0 .25em 0;
	transition: 0.4s;
	}
#menu-icon-wrapper.open .hamburger-bar-1 {
  -webkit-transform: rotate(45deg) translate(.3em, .3em);
  transform: rotate(45deg) translate(.35em, .35em)
	}
#menu-icon-wrapper.open .hamburger-bar-2 {
	opacity: 0;
	}
#menu-icon-wrapper.open .hamburger-bar-3 {
  -webkit-transform: rotate(-45deg) translate(.3em, -.3em);
  transform: rotate(-45deg) translate(.3em, -.3em);
	}

/* INDEX PAGE ------------------- */

/* Main title ------------------- */
#index-header-wrapper{
	margin: 0 auto 0 auto;
	width: 900px;
	}
h1#main-title{
	text-align: center;
	font-family: 'Luckiest Guy';
	font-weight: normal;
	color: #8C1D40;
	font-size: 4.5em;
	line-height: .9em;
	letter-spacing: .05em;
	margin: 0;
	padding: .35em 0 .15em 0;
	}
h1#main-title .small{
	font-size: 70%;
	}

h2#banner{
	padding: .6em .4em .5em .4em;
    margin: 0 0 .75em 0;
    background-color: #FFC627;
    text-align: center;
    font-size: 1.5em;
    line-height: 1em;
    font-weight: bold;
	}

/* Main icons ------------------- */
.icon-container{
	padding: 2em 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
.icon-container-item{
	text-align: center;
	width: 48%;
	padding: 0;
	margin: .5em 1% .5em 1%;
	}
.icon-container-item img{
	width: 70%;
	display: inline-block;
	position: relative;
	display: block;
	margin: 0 auto .4em auto;
	}
.details{
	margin: 0;
	}
#index-wrapper{
	text-align: center;
	}
.main-button.more-games{
	display: block;
	width: 95%;
    margin: .5em auto;
	text-align: center;
	}

/* INTRO & HOW TO PLAY, & SCIENCE------------------- */
.float-left{
	margin-top: 1em;
	}
.float-right{
	margin-top: 1em;
	}
.float-right.small img{
	display: block;
	width: 60%;
	margin: 0 auto .25em auto;
	}
.float-right p, .float-left p {
	color: #939393;
	margin-top: 0;
	text-align: left;
	}
/* used for equations and parameters for About the Science page */	
.model-box{
	padding: .5em;
	border: 1px solid #ccc;
	margin: .25em;
	}

/* HOW TO PLAY PAGE ------------------- */

#how-to-play-wrapper dl{
	clear: both;
	padding: .7em 0 .7em 0;
	margin: 0;
	}
#how-to-play-wrapper dd{
	padding: .3em 0 0 0;
    margin-left: 2.25em;
	}	
#how-to-play-wrapper dt{
	float: left;
	width: 1.75em;
	}
#how-to-play-wrapper dt img{
	float: left;
	padding-bottom: .1em;
	} 

/* LIBRARY GLOSSARY PAGE ------------------- */
.glossary-block{
	padding: .5em 0 .5em 0;
	margin: 0;
	}
p.glossary-term{
	margin: 0;
	}
p.glossary-definition{
	padding: 0;
	margin: 0;
	display: none;
	}	

/* TOGGLE ITEMS ------------------- */
.toggle-item{
	padding: 0 0 0 1.15em;
    background-image: url(../images/triangle-closed.svg);
    background-repeat: no-repeat;
    background-position: .3em 0;
    background-size: .7em;
	}
.toggle-item.open{
	background-image: url("../images/triangle-open.svg");
	background-position: 0 .2em;
    background-size: 1em;
	}
/* adds border around entire section */	
.border-wrapper{
	border: solid 1px #ccc;
    margin-top: .5em;
    padding: 1em .5em;
	}	

/* MESSAGES (MORE INFO, MENU WARNING) ------------------- */
/* message boxes for when Home and More Info buttons are clicked */ 
#sim-icon-message-wrapper{
	padding: 0;
	position: relative;
	clear: both;
	}
#sim-icon-message-wrapper div{
	padding: 1.25em .5em 1.25em .5em;
	position: relative;
	display: none;
	}
#sim-icon-message-wrapper p{
	padding: 0;
	margin: 0;
	}		
#home-message-box {
	background-color: #ffdcdf;
	}
#home-message-box p{
	padding-bottom: .5em;
}	

#info-message-box {
	background-color: #eee;
	}		
.x-icon{
	width: 1.5em;
    position: absolute;
    right: .75em;
    top: .3em;
    cursor: pointer;
	}
#home-message-main-menu-button{
	margin: .5em 0 0 0;
	}
	

/* PLAY PAGE (PLAY TYPE SELECTION) ------------------- */
#play-wrapper h1 {
	margin-bottom: 1.25em;
	}			


/* SIM ICONS ------------------- */
#sim-icon-wrapper{
	position: absolute;
	margin: 0;
	z-index: 300;
    top: .35em;
    right: 0;
	}
#sim-icon-wrapper.padded{
	margin-right: 2.5em;
	}	
#sim-icon-wrapper img {
	cursor: pointer;
	display: inline-block;
	width: 1.75em;
	margin: 0 .5em 0 0;
	} 
img#sound-icon, img#mute-icon{
	display: none;
	}


/* PREVIEWS ----------------------- */
#preview-wrapper{
	border-bottom: .1em dotted #ccc;
	margin-bottom: 1em;
	padding-bottom: .5em;
	display: flex;
	}

#preview-wrapper>div{
	display: grid;
	grid-template-columns: 2em auto;
	align-items: center;
	grid-gap: .5em;
	margin-right: 2em;
	}
#preview-wrapper img{
	widows: 100%;
    display: inline-block;
    vertical-align: middle;
	}
#preview-wrapper>div>div{
	display: inline-block;
	}	

#preview-wrapper #display-mode-preview{
	font-weight: bold;
	grid-template-columns: 1fr;
	}

/* EXTRA STYLES ----------------------- */

.light-text{
	color: #777;
	}

.summary {
	display: none;
	overflow: auto;
	}	

/* SLIDERS ----------------------- */

/* bar */
.slider {
  	-webkit-appearance: none;
  	width: 90%;
  	margin: 0 5% 0 5%;
  	height: 15px;
  	border-radius: 5px;  
  	background: #CCC;
  	outline: none;
  	opacity: 1;
  	-webkit-transition: .2s;
  	transition: opacity .2s;
	}

/* thumb (handle)
IMPORTANT: Webkit prefix can't be comma separated to combine */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 60px;
	height: 60px;
	border-radius: 50%; 
	background: #8C1D40;
	cursor: pointer;
	}
.slider::-moz-range-thumb {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #8C1D40;
	cursor: pointer;
	}
.slider.inactive::-webkit-slider-thumb{
	background: #999;
	}
.slider.inactive::-moz-range-thumb {
	background: #999;
	}

/* Back to top button --------------------- */
#back-to-top{
	position: fixed;
	width: 2.5em;
	height: 2.5em;
	background-color: #000;
	opacity: .4;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	text-align: center;
	margin-right: 1em;
	margin-bottom: 1em;
	padding-top: 0;
	z-index: 500;
	cursor: pointer;
	transition: all 300ms ease-in-out;
	transform: rotate( 240deg) scale(0, 0);
	}	
#tri {
  	width: 0; 
  	height: 0;
    border-left: .8em solid transparent;
    border-right: .8em solid transparent;
    border-bottom: 1.25em solid #fff;
    margin: auto;
    padding-top: .5em;
	}
#back-to-top.show{
	transform: scale(1, 1);
	transform: rotate(0deg);
	}		

.more-info{
	padding-top: 1em;
	}

/* FOOTER ------------------- */
#footer-wrapper{
	position: relative;
	display: block;
	margin: 2em auto 3em auto;
	padding: 0;
	clear: both;
	border-top: .1em solid #ccc; 
	width: 900px;
	}	
#footer-wrapper p{
	font-weight: normal;
	margin: .5em 1em 0 .5em;
	color: #aaa;
	font-size: .8em;
	}	
#footer-wrapper a{
	font-weight: normal;
	color: #aaa;
	}
#footer-wrapper a:hover{
	color: #50a8ff;
	text-decoration: underline;
	}		


/* REMOVES BLUE HIGHLIGHT WHEN ELEMENT IS CLICKED */
.link, a:active, img:active, .main-button:active, #howPlayButton:active, #soundButton:active, path:active, .sublink, svg, 
.select-pathogen-item, .select-pathogen-item:active, .select-mask-type-item, .select-mask-type-item:active, #back-to-top{
	-webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
	}