@media (max-width: 859px) {
	#container {
	display: none;
	}
	#main-column {
	display: none;
	}
	#side-column {
	display: none;
	}
	#blocking-container {
	display: block;
	margin: auto;
    width: 50%;
    padding: 10px;
	}
	
	#electron-screen {
	padding-top:130px;
	display: block;
	max-width: 200px;
	margin:auto;
	}
	
	#blocking-container p {
	display: block;
	max-width: 200px;
	text-align: center;
	font-family: 'Gill Sans', 'Helvetica', 'Arial', sans-serif;
	font-size: 16px;
	color: black;
	margin: auto;
	padding-top:20px;
	padding-bottom:150px;
	color: #2B3990;
	}
}
@media (min-width: 860px) {

#container {
    margin: auto;
    width: 860px;
    padding: 10px;
    display: block;
    color: #2B3990;
}
#blocking-container {
	margin: auto;
    width: 50%;
    padding: 10px;
display: none;
}

#blocking-container p {
	max-width: 200px;
	text-align: center;
	font-family: 'Lato','Gill Sans', 'Helvetica', 'Arial', sans-serif;
	font-size: 14px;
	color: #2B3990;
	margin: auto;
}

#main-column {
float:left;
padding-right: 30px;
width:600px;
}

#side-column {
float: right;
padding-top: 10px;
padding-bottom:10px;
font-family: 'Lato','Gill Sans', 'Helvetica', 'Arial', sans-serif;
font-size: 14px;
color: #2B3990;
}

.map-group:hover .map-item {
  -webkit-animation: rotateRight 0.75s steps(2, end) infinite; /* Safari 4+ */
  -moz-animation:    rotateRight 0.75s steps(2, end) infinite; /* Fx 5+ */
  -o-animation:      rotateRight 0.75s steps(2, end) infinite; /* Opera 12+ */
  animation:         rotateRight 0.75s steps(2, end) infinite; /* IE 10+, Fx 29+ */
}

.map-group:hover .on-label {
  -webkit-animation: rotateLeft 0.75s steps(2, end) infinite; /* Safari 4+ */
  -moz-animation:    rotateLeft 0.75s steps(2, end) infinite; /* Fx 5+ */
  -o-animation:      rotateLeft 0.75s steps(2, end) infinite; /* Opera 12+ */
  animation:         rotateLeft 0.75s steps(2, end) infinite; /* IE 10+, Fx 29+ */
}

/* game scenario styling */

#game-start p {
font-family: 'Lato','Gill Sans', 'Helvetica', 'Arial', sans-serif;
font-size: 14px;
text-align: center;
margin: auto;
padding-top:20px;
max-width: 170px;
color: #2B3990;
}
#start-icon {
max-width: 212px;
cursor: pointer;
}
#start-icon:hover {
  -webkit-animation: rotateLeft 0.75s steps(2, end) infinite; /* Safari 4+ */
  -moz-animation:    rotateLeft 0.75s steps(2, end) infinite; /* Fx 5+ */
  -o-animation:      rotateLeft 0.75s steps(2, end) infinite; /* Opera 12+ */
  animation:         rotateLeft 0.75s steps(2, end) infinite; /* IE 10+, Fx 29+ */
}

@keyframes rotateLeft {
to {transform: rotate(-15deg);}
}

@keyframes rotateRight {
to {transform: rotate(15deg);}
}

#game-play {
display: none;
}


#q-image {
max-width:200px;
max-height: 160px;
margin:auto;
display: block;
}

#game-play p {
font-family: 'Lato','Gill Sans', 'Helvetica', 'Arial', sans-serif;
font-size: 14px;
text-align: center;
margin: auto;
padding-top:20px;
max-width: 170px;
color: #2B3990;
}

/* selection styling */
.select-row {
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 2px;
    background: #fff;
    border: 1px solid #E8E8E8;
    margin-right: 6px!important;
    border-radius: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px;
    width: 200px;
}

.select-row:hover {
border: 1px solid #49afff;
cursor: pointer;
}

#footer {
font-family: 'Lato', 'Gill Sans', 'Helvetica', 'Arial', sans-serif;
color: #2B3990;
font-size:9px;
margin-top:3px;
margin-left: 15px;
opacity:0.5;
}

#game-end {
display: none;
font-family: 'Lato','Gill Sans', 'Helvetica', 'Arial', sans-serif;
font-size: 14px;
text-align: left;
margin: auto;
padding-top:20px;
max-width:200px;
color: #2B3990;
}

#restart-button {
text-align: center;
padding-top:10px;
padding-bottom: 10px;
border-radius: 5px;
border: 1px solid #E8E8E8;
width:200px;
}

#restart-button:hover {
border: 1px solid #49afff;
cursor: pointer;
}

#job-title {
font-size: 30px;
width: 200px;
font-weight: bold;
}

#backstory {
	height:100%;
	width: 180px;
	padding: 20px 16px 20px 16px;
	margin-top: 50px;
	background-color: #f15929;
	color: #ffffff;
	border-radius: 3px;
	display: none;
	box-shadow: 0px 0px 15px #b2afe9;
	z-index: 200 !important;
}

#backstory:hover {
	background-color: #262262;
}

#backstory-text {
	text-align: center;
}
} /* end of media */