.modal-active header {
	position: absolute;
}

[data-modal] {
	background: rgba(255, 255, 255, .5);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	color: white;
	display: none;
	left: -9999px;
  opacity: 0;
	padding: 0 10px;
	position: absolute;
	text-align:center;
	top: 0;
	transition: opacity .5s, left 0 .5s;
	-webkit-transition: opacity .5s, left 0 .5s;
	width: 100%;
	z-index: 11;
}

[data-modal].active {
	left: 0;
  opacity: 1;
	transition: opacity .5s;
	-webkit-transition: opacity .5s;
}

/**
 * Distinct from active in that it is applied .5s after the modal is dismissed.
 */
[data-modal].visible {
	display: block;
}

[data-modal] [src="/shared/assets/img/modal-close.png"] {
	cursor: pointer;
	right: 0;
	position: absolute;
	top: 0;
}

[data-modal].no-close [src="/shared/assets/img/modal-close.png"] {
	display: none;
}

[data-modal] .container {
	background: #323532;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: inline-block;
	height: 100%;
	max-width: 380px;
	padding: 20px;
	text-align: left;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	transition: transform .5s;
	-webkit-transition: -webkit-transform .5s;
	width: 100%;
}

[data-modal].active .container {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

[data-modal] h1 {
	color: #76b844;
	font-size: 30px;
	text-align: center;
}

[data-modal] form input[type="text"],
[data-modal] form input[type="password"],
[data-modal] form input[type="submit"].button,
[data-modal] form a.button,
[data-modal] form select {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	max-width: none;
	width: 100%;
}

[data-modal] p,
[data-modal] .app-icons {
	text-align: center;
}

[data-modal] .app-icons {
	margin: 0 auto;
	white-space: nowrap;
	width: 264px;
}

[data-modal] .app-icons .app-icons-appstore {
	background-image: url(/shared/assets/img/icon-appstore-inverted.min.svgz);
}

[data-modal] .app-icons .app-icons-appstore:lang(fr) {
	background-image: url(/shared/assets/img/icon-appstore-inverted-fr_ca.min.svgz);
}

[data-modal] .app-icons .app-icons-appstore:lang(es) {
	background-image: url(/shared/assets/img/icon-appstore-inverted-es_mx.min.svgz);
}

.no-svg [data-modal] .app-icons .app-icons-appstore {
	background-image: url(/shared/assets/img/icon-appstore-inverted.png);
}

.no-svg [data-modal] .app-icons .app-icons-appstore:lang(fr) {
	background-image: url(/shared/assets/img/icon-appstore-inverted-fr_ca.png);
}

.no-svg [data-modal] .app-icons .app-icons-appstore:lang(es) {
	background-image: url(/shared/assets/img/icon-appstore-inverted-es_mx.png);
}

[data-modal] .app-icons .app-icons-play {
	background-image: url(/shared/assets/img/icon-play-inverted.min.svgz);
}

[data-modal] .app-icons .app-icons-play:lang(fr) {
	background-image: url(/shared/assets/img/icon-play-inverted-fr_ca.min.svgz);
}

[data-modal] .app-icons .app-icons-play:lang(es) {
	background-image: url(/shared/assets/img/icon-play-inverted-es_mx.min.svgz);
}

.no-svg [data-modal] .app-icons .app-icons-play {
	background-image: url(/shared/assets/img/icon-play-inverted.png);
}

.no-svg [data-modal] .app-icons .app-icons-play:lang(fr) {
	background-image: url(/shared/assets/img/icon-play-inverted-fr_ca.png);
}

.no-svg [data-modal] .app-icons .app-icons-play:lang(es) {
	background-image: url(/shared/assets/img/icon-play-inverted-es_mx.png);
}

[data-modal].small .container {
	border-radius: 10px;
	height: 160px;
	line-height: 20px;
	margin: 140px;
	text-align: center;
	width: 160px;
}

[data-modal].small .container h1 {
	color: white;
	font-size: 18px;
	margin: 0;
}

[data-modal].small .container img.icon {
	margin: 20px;
	width: 36px;
}