body{
	min-width: 730px;
	}

/* SMALL.CSS --------------------------------------------------------- */ 	

/* INNER WRAPPER -------- */ 	
#inner-wrapper{
	max-width: 850px;
	margin: 3.5em auto 0 auto;
	}
#inner-wrapper.no-max{
	max-width: none;
	}

.middle-max-width{
	position: relative;
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	}	

/* HEADER ----------- */ 	
#header{
	max-width: 850px;
	margin: 0 auto;
	}	

h1{
	padding: 1em 0 .5em 0;
	}
li {
    padding: 0.25em 0;
}


/* RIGHT SIDE IMAGES */ 
.img-right-wrapper{
	padding: 0;
	grid-gap: 3.5em;
	grid-template-columns: 1.25fr 1fr;
	}
.img-right-wrapper.small{
	grid-template-columns: 4fr 1fr;
	}	
.img-right-wrapper.medium{
	grid-template-columns: 3fr 1fr;
	}	
.img-right-wrapper>div:first-child{ order: initial; }
.img-right-wrapper>div:nth-child(2){ 
	align-self: center;
	order: initial; 
	}
.img-right-wrapper.small>div:nth-child(2), .img-right-wrapper.medium>div:nth-child(2) {
	width: 100%;
	}	
.img-right-wrapper.small img, .img-right-wrapper.medium img{
    width: 100%;
    justify-self: center;
	}	
	
h1 + .img-right-wrapper h2{
	padding-top: .5em;
	}

/* center images */
.img-center-wrapper{
	padding: 1em 3em;
	}	 
.img-center-wrapper.small{
	width: 60%;
	display: block;
	margin: 0 auto;
	}
.img-center-wrapper.medium{
	width: 75%;
	display: block;
	margin: 0 auto;
	}

/* TOP MESSAGE BOXES ----------------- */ 
.top-message-wrapper{
	padding: 2em;
	max-width: 850px;
    margin-left: auto;
    margin-right: auto;
	}

/* BACK TO TOP ------------------ */ 	
#back-to-top{
	margin-bottom: 1em;
	}	


/* CHARACTERS -------------------- */

.character-message-wrapper{
	margin: 2em auto;
	display: flex;
  	align-items: flex-start;
	grid-gap: 2.5em;
	}
.character-message-wrapper > img{
	width: 13rem;
  	height: 13rem;
	margin: 0;
	}		
.character-message-wrapper > div::before{
	content:url('../images/characters/textbox-triangle.svg');
	position: absolute;
	left: -33px;
	top: 70px;
	width: 35px;
	}
.character-message-wrapper > div{
	padding: 1.5em 2em;
	}	
.section-links{
	display: flex;
	grid-gap: 1rem;
	align-items: center;
	}

/* SLIDERS.CSS --------------------------------------------------------- */ 	
.slider-wrapper {
    padding: 0;
	}
.slider {
	margin: 1% 0;
	height: .65em;
	}	



/* TOGGLE ------------------------------------------------- */
.toggle-box .toggle-content-wrapper{
	padding: 2em 1.5em;
	}
.toggle-title {
    padding: 1em 1.5em;
	}

/* PAGE SPECIFIC STYLES ---------------------- */

/* HOME PAGE -------------------------------- */
#home-title{
	font-size: 5.5em;
	}
.banner{
	margin: 0 0 3em 0;
	padding: 0.75em;
	}
.main-icons > div{
	width: 200px;
	}


/* INTRO PAGE -------------------------------- */
#pressure-example-wrapper{
	grid-gap: .5em 2em;
	}


/* VIEW COMPARE CELLS ----------------------------------------------- */
#no-results-text{
	margin: 0em 3em;
	}

#hotspot-wrapper path:hover{	
	stroke: var(--link);
    stroke-width: 5;
	}	

#cells-selected-feedback{
	display: block;
	background-color: var(--highlight-yellow);
	padding: 1em 1.25em;
	position: absolute;
	top: 0;
    right: -1em;
	transition: opacity .25s ease-in-out;
	border-radius: 0.5em;
	}
#cells-selected-feedback.hidden{ display:none; }

#view-compare-menu {
   	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0;
	}
#view-compare-menu button{border-radius: 0; }
#view-compare-menu button:first-child{ border-radius: .5em 0 0 .5em; }
#view-compare-menu button:last-child{ border-radius: 0 .5em .5em 0; }		

#cell-viewer {
	margin-top: 2em;
	position: relative;
	margin: 4em 3em 0 3em;
	}
#view-compare #results-content {
	grid-template-columns: 1fr 1fr;
	}
/* card type specific */
#view-compare .card-wrapper.microscopy, #view-compare .card-wrapper.location{
	min-height: 26em;
	}





/* EXPLORE CELLS -------------------------------------------- */
#mutation-wrapper .thumb-wrapper > div:first-child > div{
	margin-right: 4em;
	}
#mutation-wrapper .thumb-wrapper > div > div {
	min-width: 5em;
	}	
#mutation-wrapper .thumb-wrapper{
	padding: 0 2em;
    margin: 3em auto .75em auto;
    grid-template-columns: repeat(5, auto);
	}
#mutation-wrapper .nc-ratio, #cancer-wrapper .nc-ratio {
	padding: 1em 1.25em;
	}

#cancer .slider-control-wrapper	{
	padding: 0;
	}
/* results */ 
#mutation-wrapper .mutation-result, #cancer-result-wrapper{
	padding: 2em 4em 1em 4em;
	}






/* SIMULATION ----------------------------------------------------- */
.large-col-wrapper{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( 300px, 1fr));
	margin: 1em auto 0 auto;
	max-width: 1100px;
	grid-gap: 3%;
	}
.large-col-wrapper.hidden { display:none; }

#reset{ margin: 1.5em 0 0 0 }

#simulation-controls-wrapper{
	padding: .5em 2em 1em 2em;
	}
#cell-info-wrapper .stats-wrapper{
	grid-template-columns: 1fr 1fr;
	}	

#cell-info-wrapper{
	grid-template-columns: 1fr;
	grid-gap: 1em;
	}	





/* QUIZ ---------------------------------------------------- */

#card-wrapper{
	padding: 0 2em 3em 2em;
	}	

#quiz-menu #score-wrapper {
    width: 50%;
    margin: 2em 0 3em 0;
	}	

.grid-2x{
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 3em;
	}	
	
/* Progress Feedback Wrapper */
#quiz #progress-wrapper{
	display: flex;
	padding: 1em 1.5em;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	}
#quiz #progress-questions{ grid-gap: .75em; }	
#quiz #progress-wrapper > div:nth-child(2){
	margin:  0 0 0 auto;
	}
#quiz #progress-accuracy{
	margin-top: 0;
	}

#quiz #feedback-wrapper{
	padding: 2em;
	line-height: 1.5rem;
	}	

/* For compare cells quiz questions layout */
#quiz #choice-wrapper.compare-cells{ grid-template-columns: repeat(4, 1fr); }	

/* cancer cells and mutation questions */
#quiz #cell-selection-question-wrapper.cancer {
	grid-gap: 2em;
	grid-template-columns: 2fr 7fr;
	}

#quiz #cell-selection-question-wrapper.mutation {
    grid-gap: 2em;
    grid-template-columns: 2fr 6fr;
	}

#quiz #cells-wrapper{
	margin: 2em 4em 1em 4em;
	}

/* print */
#quiz #print-section input {
    width: 50%;
	}