#mainStagePanel {
     position: relative;
    background-size: 100% 100%;
	/*-webkit-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);
	box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);*/
}

#mainStagePanelInner {
	position: relative;
}

#mainStagePanel .medias {
	width: 100%;
    height: 100%;
}

/* Chrome 45 issue in builder with Floating layout */
.builder-mode.layout-float #mainStagePanel {
	width: 100%;
}

/*
 * One container with Map or any media
 */
.mainMediaContainer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-overflow-scrolling: touch;
	overflow-y: auto;
}

.mainMediaContainer.active {
	display: block !important;
	z-index: 1;
	visibility: visible;
	-webkit-animation: fadein 1s;
	-moz-animation: fadein 1s;
	-ms-animation: fadein 1s;
	-o-animation: fadein 1s;
	animation: fadein 1s;
	-webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

html.dj_ie9 .mainMediaContainer.active {
	opacity: 1.0;
}

/*
 * Error
 */

.mainMediaContainer .mainStageErrorContainer {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	right: 50%;
	margin-left: -110px;
	margin-top: -48px;
	opacity: 0.0;
}

.mainMediaContainer.has-error .mainStageErrorContainer {
	display: block;
	-webkit-animation: fadein 3s;
	-moz-animation: fadein 3s;
	-ms-animation: fadein 3s;
	-o-animation: fadein 3s;
	animation: fadein 3s;
	-webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

html.dj_ie9 .mainMediaContainer.has-error .mainStageErrorContainer {
	opacity: 1.0;
}

.mainMediaContainer.has-error .error {
	width: 220px;
	background-color: #f2dede;
	font-size: 1.1em;
	font-family: 'open_sanssemibold', sans-serif;
	text-align: center;
	padding: 15px;
}

/*
 * Map
 */

.mapContainer {
    border:none;
    padding:0;
    height:100%;
    width:100% !important;
    overflow:hidden;
    background-color: #FFF;
}

.mapContainer.legend {
	display: none;
}

/*
 * Popup tunning
 */

/*.mapContainer .esriPopup .actionList {*/
.esriPopup .actionsPane {
	display: none !important;
}

.esriPopup .titleButton.prev {
	right: 55px !important;
}

.esriPopup .titleButton.next {
	right: 31px !important;
}

.esriPopup .title {
	color: transparent;
}

.esriPopup.light .titlePane {
	height: 21px;
}

.esriPopup.light .titleButton {
	top: 4px;
}

.esriPopup .titleButton.close {
	opacity: 1.0 !important;
}

.esriPopup .maximize {
	display: none;
}

/* Somehow there is a conflict */
.esriPopup .titlePane .spinner {
	display: none !important;
}

/* override bootstrap rules so it looks like standard popup */

.esriPopup p {
	margin: 12px 0;
}

.esriPopup hr {
	margin: 6px 0;
	border: 1px inset;
}

.esriPopup a {
	font-weight: normal;
}

.esriPopup.light .contentPane {
	color: #333333;
}

/*
 * Loading
 */

#mainStageLoadingIndicator {
	position: absolute;
	top: 50%;
	display: none;
	z-index: 99;
}

/*
 * Image
 */

.imgContainer {
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.imgContainer.fit {
	background-size: contain;
}

.imgContainer.fill {
	background-size: cover;
}

.imgContainer.stretch {
	background-size: 100% 100%;
}

/*
 * Embed
 */

.embedContainer {
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: none;
}

.embedContainer.fit {
	width: 100%;
	max-height: 100%;
}

.embedContainer.stretch {
	width: 100%;
	height: 100%;
}

/* stupid iOS and its inability to stick to web standards.
 this allows some iframes scroll that weren't scrolling before.
 idk why they weren't scrolling, but now they are. :tada: */
html.dj_ios body.mobile-view .embedContainer {
  position: relative;
}

/* invisible buttons */
.mainMediaContainer .return-to-content {
  position: absolute;
  z-index: 31; /* over the overview map and legend */
  left: 38%;
}

.return-to-content.bottom {
  bottom: 10px;
}

.return-to-content.top {
  top: 10px;
}

.mainMediaContainer .visible-on-focus {
  display: inline-block;
}
