/* XX-SMALL MOBILE: LIGHT BLUE; ************************************/

@media only screen and (min-width: 20em) {


	/****************************** NEW STUFF ************************************/

	#qhs-main{
		/*border: 1px solid lightblue;*/
		width: 95%;
		margin: 1em 2.5% 0 2.5%;
		float: left;
	}

	#qhs-main img{
		width: 100%;
		float: left;
	}

			#stop1{
				position: absolute;
				top: 31%;
				left: 1.4%;
				z-index: 3;
			}
		/*tooltips*/
		.tooltip {
			cursor: pointer;
			font-family: "Roboto Slab", serif;
			font-weight: 1.25em;
			line-height: 1.5em;
			text-align: center;
			vertical-align: center;
			font-weight: 700;
			background-color: #F2DB68;
			width: 25px;
			height: 25px;
			position: relative;
			display: inline-block;
			z-index: 1;
		}
			.tooltip_text{
				text-align: left;
				padding: 0 20px;
			}
		.tooltip-content {
			display: none;
			position: absolute;
			margin-top: 5px;
			background-color: #f9f9f9;
			min-width: 300px;
			opacity: .9;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
		}
			#right{
				right: 0;
			}
			#left{
				left: 0;
			}
			#middle{
				left: -170px;
			}
		.tooltip:hover .tooltip-content {
			display: block;
		}


		/*span*/
		.bold{
			font-weight: 500;
		}
	

/** X-SMALL: SMARTPHONES LANDSCAPE: LIME *************************************/

@media only screen and (min-width: 30em) {

		#qhs-main{
			/*border: 1px solid lime;*/
			width: 90%;
			margin: 0 5%;
			float: left;
		}
}

/** SMALL: TABLETS PORTRAIT: PINK; *************************************/

@media only screen and (min-width: 48em) {


		#qhs-main{
			/*border: 1px solid pink;*/
			width: 90%;
			margin: 0 5%;
			float: left;
		}
}

/** MEDIUM: TABLET LANDSCAPE / DESKTOP: YELLOW; *************************************/

@media only screen and (min-width: 64em) {

		#qhs-main{
			/*border: 1px solid yellow;*/
			width: 80%;
			margin: 0 10%;
			float: left;
		}

}

/* LARGE: DESKTOP: ORANGE; ************************************/

@media only screen and (min-width: 85.375em) {

		#qhs-main{
			/*border: 1px solid orange;*/
			width: 70%;
			margin: 0 15%;
			float: left;
		}

}

/* X-LARGE: DESKTOP: CYAN; ************************************/

@media only screen and (min-width: 120em) {

		#qhs-main{
			/*border: 1px solid cyan;*/
			width: 60%;
			margin: 0 20%;
			float: left;
		}

}

/* XX-LARGE: DESKTOP: RED; ************************************/

@media only screen and (min-width: 160em) {

		#qhs-main{
			/*border: 1px solid red;*/
			width: 70%;
			margin: 0 15%;
			float: left;
		}

}