/*
This is a good layout for a mobile-first CSS template.
Following this flow will minimize the number of styles you need to write and will ensure you are thinking, designing and developing mobile-first.
Most of your styles get written like standard CSS, but for your mobile presentation. Generally speaking, a good mobile presention will stretch out nicely for larger screens.
Sometimes, when we stretch out to larger screens, we need to make minor tweaks for the larger devices -- you can make these tweaks in the tablet media query, or if the issue exists on desktop only, the desktop media query.
You will find this is far easier than the opposite task of using CSS to cram your desktop experience into a mobile device.
*/


/* THIS LINE LOADS IN A NICE RESET TO ENSURE ALL BROWSERS HAVE THE SAME BASE STYLES */

@import url('normalize.min.css');

/* Start your base/mobile styles here */

* {
    box-sizing: border-box;
}

.instructions{
	font-size:19px;
	opacity:.9;
	text-align:center;
	color:#2F7AB2;
}

.imagecredit{
	font-size:10px;
	font-style:italic;
	font-family: 'Roberto Mono', monospace;
	opacity:.8;

}

.byline {
  font-family: 'Roberto Mono', monospace;
  font-size: 16px;
  font-style: italic;
  margin-top: 16px;
  border-bottom: 1px solid #000000
}

.hotimage{
	width:100%;
	margin-left:8px;
	margin-right:8px;
}

.image_container{
	position: relative;
	width: 100%;
}

.hotspot{
	position: absolute;
	height:40px;
	width:40px;
	text-align:center;
	padding: 10px;
	color: white;
	background: red;
	opacity: .6;
	font-family: sans-serif;
	font-weight: bold;
	outline: none;
	border: 2px solid #fff;
	border-radius: 100px;
	cursor:pointer;
}

.button_close {
  position: absolute;
  font-family: sans-serif;
  top: 3%;
  left: 92%;
  font-size: 40px;
  color: white;
  z-index: 4;
  font-weight: 900;

}

.info_slides {
  position: absolute;
  background: red;
  opacity: 0.7;
  z-index:6;
  display:none;
  height:100%;
  width:100%;
}

.info_slides_show {
  display: block;
}

.hide_button {
  display: none;
}

.button_close_show {
  display: block;
}

.popIn_text{
	font-size:16px;
	font-family: 'Roberto Mono', monospace;
	color: white;
	margin-left: 5px;
  	margin-right: 5px;
  	text-align:center;
  	margin-top:48px;
}

/* Tablet/Desktop overrides */

@media(min-width: 681px) {
 .byline{
 	font-size:28px;
 }

.imagecredit{
	font-size:20px;
}

.hotspot{
	height:50px;
	width:50px;
}

.button_close {
font-size:50px;
}
.popIn_text{
	font-size:24px;
}

.popIn_text{
	margin-top:100px;
	}

.instructions{
font-size:35px;
}
}