.success-bar {
	display: inline-block;
	width: 100%;
	padding: 15px 2%;
	border-radius: 4px;
	background-color: #91a060;
	color: white;
	font-weight: bold;
	margin-bottom: 20px;
}
.success-bar .success-bar-icon {
	display: inline-block;
	vertical-align: middle;
	width: 7%;
	margin-right: 2%;
}
.success-bar .success-bar-icon .info-icn {
	width: 100%;
}
.success-bar .success-bar-content {
	display: inline-block;
	vertical-align: middle;
	width: 90%;
}
.success-bar:hover {
	color: #fff;
	background: #9caa70;
}

@media (max-width: 750px) {
	.success-bar .success-bar-icon {
		width: 10%;
	}
	.success-bar .success-bar-content {
		width: 84%;
	}
}
@media (max-width: 480px) {
	.success-bar {
		padding: 15px 4%;
	}
	.success-bar .success-bar-icon {
		width: 16%;
		margin-right: 4%;
	}
	.success-bar .success-bar-content {
		width: 72%;
	}
}
.row.submenu {
	margin-top: 30px;
}
.row.submenu .career-sub-menu.flex-submenu {
	margin-top: 10px;
	padding-bottom: 0;
}

.prescribing-info {
	background: #f7f7f7;
	padding: 20px 15px 20px 15px;
}
.prescribing-info .info-wrapper {
	max-height: 160px;
	overflow: hidden;
	margin-bottom: 20px;
	position: relative;
	transition: max-height 0.2s ease;
}
.prescribing-info .info-wrapper:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(247, 247, 247, 0) 10%, #f7f7f7 100%);
}
.prescribing-info .info-wrapper img {
	width: 100%;
}
.prescribing-info .btn.icn-chevron-down:before {
	position: relative;
	top: -1px;
}
.prescribing-info.expanded .info-wrapper {
	max-height: 3000px;
}
.prescribing-info.expanded .info-wrapper:after {
	display: none;
}
.prescribing-info.expanded .btn.icn-chevron-down:before {
	transform: rotate(180deg);
}

@media (max-width: 959px) {
	.prescribing-info.expanded .info-wrapper {
		overflow: scroll;
	}
	.prescribing-info.expanded .info-wrapper img {
		width: inherit;
		max-width: inherit;
		min-width: 100%;
	}
	.prescribing-info.expanded .info-wrapper:after {
		display: none;
	}
}
@media (max-width: 640px) {
	.prescribing-info {
		text-align: center;
	}
}
.icon-pdf {
	font-size: 1em;
	font-family: "AvenirNextMedium", Arial, sans-serif;
	display: block;
	background: url(../../../img/svg/file/icn-file-pdf.svg) 0 0 no-repeat;
	background-size: 32px 40px;
	padding-left: 42px;
	min-height: 40px;
	margin-bottom: 30px;
	line-height: 1.2;
}
.icon-pdf:last-of-type {
	margin-bottom: 0;
}

.icon-ppt {
	font-size: 1em;
	font-family: "AvenirNextMedium", Arial, sans-serif;
	display: block;
	background: url(../../../img/svg/file/icn-file-ppt.svg) 0 0 no-repeat;
	background-size: 32px 40px;
	padding-left: 42px;
	min-height: 40px;
	margin-bottom: 30px;
	line-height: 1.2;
}
.icon-ppt:last-of-type {
	margin-bottom: 0;
}

.icon-xls {
	font-size: 1em;
	font-family: "AvenirNextMedium", Arial, sans-serif;
	display: block;
	background: url(../../../img/svg/file/icn-file-xls.svg) 0 0 no-repeat;
	background-size: 32px 40px;
	padding-left: 42px;
	min-height: 40px;
	margin-bottom: 30px;
	line-height: 1.2;
}
.icon-xls:last-of-type {
	margin-bottom: 0;
}

.icon-mp4 {
	font-size: 1em;
	font-family: "AvenirNextMedium", Arial, sans-serif;
	display: block;
	background: url(../../../img/svg/file/icn-file-mp4.svg) 0 0 no-repeat;
	background-size: 32px 40px;
	padding-left: 42px;
	min-height: 40px;
	margin-bottom: 30px;
	line-height: 1.2;
}
.icon-mp4:last-of-type {
	margin-bottom: 0;
}

.icon-img {
	font-size: 1em;
	font-family: "AvenirNextMedium", Arial, sans-serif;
	display: block;
	background: url(../../../img/svg/file/icn-file-image.svg) 0 0 no-repeat;
	background-size: 32px 40px;
	padding-left: 42px;
	min-height: 40px;
	margin-bottom: 30px;
	line-height: 1.2;
}
.icon-img:last-of-type {
	margin-bottom: 0;
}

.icon-doc {
	font-size: 1em;
	font-family: "AvenirNextMedium", Arial, sans-serif;
	display: block;
	background: url(../../../img/svg/file/icn-file-doc.svg) 0 0 no-repeat;
	background-size: 32px 40px;
	padding-left: 42px;
	min-height: 40px;
	margin-bottom: 30px;
	line-height: 1.2;
}
.icon-doc:last-of-type {
	margin-bottom: 0;
}

.image-tiles {
	float: left;
	width: 49%;
	margin: 0 2% 20px 0;
}
.image-tiles img {
	width: 100%;
}
.image-tiles:nth-child(even) {
	margin-right: 0;
}

@media screen and (max-width: 1024px) {
	.image-tiles {
		width: 100%;
		margin-right: 0;
	}
}
.video-tiles {
	width: 100%;
}

.video-wrapper {
	margin: 0 auto 10px;
}

.accordion-row {
	border-bottom: 1px solid #e4e4e4;
	padding: 15px 0;
}
.accordion-row:last-child {
	border-bottom: none;
}

.box-content > .accordion-row:first-child {
	padding-top: 0;
}
.box-content > .accordion-row:last-child {
	padding-bottom: 0;
}

.accordion-title {
	display: block;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.accordion-title:before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
	background-image: url(../../../img/svg/general/icn-chevron-right.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 12px;
}
.accordion-title.collapsed {
	background: none;
}

.accordion-row:first-child .accordion-title {
	line-height: inherit;
}

.accordion > div.accordion-row:first-of-type {
	padding-top: 0;
}

.accordion > div.accordion-row:last-of-type {
	padding-bottom: 0;
}

.accordion-row {
	position: relative;
}
.accordion-row .accordion-content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translate3d(0, 0, 0);
	transition: max-height 0.3s ease, opacity 0.2s 0.1s ease, padding 0.3s ease;
	padding-top: 0px;
}
.accordion-row .svg-group {
	display: inline-block;
	transition: transform 0.2s ease;
	position: absolute;
	top: 15px;
	left: 0;
	top: 50%;
	margin-top: -7px;
	line-height: 12px;
}
.accordion-row .chevron-down {
	display: none;
}
.accordion-row.active .svg-group {
	transform: rotate(90deg);
}
.accordion-row.active .accordion-content {
	opacity: 1;
	padding-top: 15px;
}
.accordion-row.active .accordion-title:before {
	transform: rotate(90deg);
}

@media screen and (max-width: 1024px) {
	.box.accordion .box-content {
		overflow: inherit;
	}
}
.box-header {
	background-color: #e4e4e4;
	width: 100%;
	display: flex;
	margin: 0;
	font-size: 24px;
	padding: 12px 20px;
}
.box-header .icn {
	display: inline-block;
	margin-right: 10px;
	height: 28px;
}
.box-header .icn .svg-group {
	display: inherit;
}

.box-content {
	background-color: #f7f7f7;
	padding: 20px;
	overflow: auto;
	margin-bottom: 30px;
}
.box-content p:last-of-type {
	margin-bottom: 0;
}

.product-feature {
	float: left;
	width: 23.5%;
	margin: 0 2% 20px 0;
}
.product-feature:nth-child(4n) {
	margin-right: 0px;
	clear: right;
}
.product-feature .post {
	width: 100%;
	height: auto;
	padding-bottom: 75%;
	position: relative;
	overflow: hidden;
	display: block;
	background-color: #e4e4e4;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.product-feature .post .content {
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: calc(100% - 40px);
	z-index: 2;
	padding-right: 68px;
}
.product-feature .post h2 {
	font-size: 18px;
	line-height: 22px;
	color: #fff;
	margin-bottom: 0px;
}
.product-feature .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: url("../../../img/bg-features-shadow.png") bottom left repeat-x;
	background-size: contain;
	transition: all 0.2s ease;
	opacity: 0.9;
}
.product-feature .post:hover .overlay {
	opacity: 0.5;
}
.product-feature .arrow {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
	background-color: rgba(255, 255, 255, 0.2);
	background-image: url(../../../img/icn-chevron-right@3x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
}
.product-feature .post:hover .arrow {
	background-color: rgba(255, 255, 255, 0.1);
	transform: scale(1.2);
}

@media screen and (max-width: 1024px) {
	.product-feature {
		float: left;
		width: 49%;
		margin: 0 2% 20px 0;
	}
	.product-feature:nth-child(2n) {
		margin-right: 0px;
		clear: right;
	}
}
@media (max-width: 480px) {
	.product-feature {
		float: left;
		width: 100%;
		margin-right: 0;
	}
	.product-feature .post h2 {
		font-size: 22px;
		line-height: 1.2;
	}
}
@media screen and (max-width: 1200px) {
	.feature .post h2 {
		font-size: 22px;
	}
	.feature .post .content {
		padding-right: 52px;
	}
	.feature .post .arrow {
		width: 32px;
		height: 32px;
		background-size: 15px 15px;
	}
}
@media (max-width: 959px) {
	.features .feature {
		width: calc(50% - 10px);
		margin: 0 0 20px 20px;
	}
	.features .feature:nth-of-type(2n+1) {
		margin-left: 0;
		clear: both;
	}
}
@media (max-width: 480px) {
	.features .feature, .features .feature:nth-of-type(2n+1) {
		width: 100%;
		margin: 0 0 15px;
	}
	.features .feature:last-of-type {
		margin-bottom: 0;
	}
}
.feature {
	width: 100%;
	overflow: hidden;
	margin-bottom: 40px;
}

.tile {
	background: #333;
	background-position: center;
	background-size: cover;
	float: left;
	position: relative;
	height: 360px;
}

.feature > .tile {
	width: 100%;
	height: 350px;
}

.feature > .tile + .tile {
	height: 180px;
	clear: both;
	width: 33.333333%;
}

.feature .tertiary {
	overflow: auto;
	width: 33.3333333333%;
	float: left;
}

.feature .tertiary .tile {
	width: 100%;
}

.feature .tile {
	border-bottom: 4px solid #fff;
}

.feature .tertiary:first-child {
	border-right: 20px solid #fff;
}

.feature .tertiary:nth-child(2) {
	border-right: 20px solid #fff;
}

.feature .tile {
	color: #fff;
	text-decoration: none;
}
.feature .overlay {
	transition: opacity 0.2s ease;
}
.feature .tile .overlay {
	opacity: 1;
}
.feature .tile:hover .overlay {
	filter: alpha(opacity=50);
	opacity: 0.5;
}

/*** Basic Tile Text/Icon Small First ***/
.feature .tile-text {
	position: absolute;
	line-height: 1.2;
	bottom: 30px;
	left: 20px;
	right: 20px;
	z-index: 11;
	padding-right: 37px;
}
.feature .tile-header {
	display: block;
	font-size: 22px;
	font-family: "AvenirNextDemi", Arial, sans-serif;
}
.feature .tile-category {
	margin: 0 0 15px;
}
.feature .icn-bg-circle {
	background: rgba(255, 255, 255, 0.2);
	display: inline-block;
	width: 32px;
	height: 32px;
	position: relative;
	border-radius: 50%;
	position: absolute;
	bottom: 0;
	right: 0;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.feature .icn-bg-circle svg {
	position: absolute;
	width: 15px;
	height: 15px;
	margin: -8px 0 0 -6px;
	top: 50%;
	left: 50%;
	fill: #fff;
}
.feature .tile:hover .icn-bg-circle {
	background: rgba(255, 255, 255, 0.1);
	transform: scale(1.2);
}

/** Bigger Features **/
.feature > .tile:first-child .tile-text, .feature.wide > .tile:first-child + .tile .tile-text, .feature.wide.tiles3 .tertiary .tile .tile-text {
	padding-right: 63px;
}
.feature > .tile:first-child .tile-header, .feature.wide > .tile:first-child + .tile .tile-header, .feature.wide.tiles3 .tertiary .tile .tile-header {
	font-size: 34px;
}
.feature > .tile:first-child .icn-bg-circle, .feature.wide > .tile:first-child + .tile .icn-bg-circle, .feature.wide.tiles3 .tertiary .tile .icn-bg-circle {
	width: 48px;
	height: 48px;
}
.feature > .tile:first-child .icn-bg-circle svg, .feature.wide > .tile:first-child + .tile .icn-bg-circle svg, .feature.wide.tiles3 .tertiary .tile .icn-bg-circle svg {
	width: 22px;
	height: 22px;
	margin: -10px 0 0 -10px;
}

/**
 * Variations: Different # of tiles
 */
.feature.tiles1 > .tile + .tile {
	display: none;
}

.feature.tiles2 .tile-header {
	font-size: 34px;
}

.feature.tiles1 .tertiary {
	display: none;
}

.feature.tiles2 > .tile,
.feature.tiles2 > .tile + .tile {
	width: 50%;
	height: 360px;
	clear: none;
}

.feature.tiles2 .tertiary {
	display: none;
}

.feature.tiles3 > .tile + .tile {
	width: 50%;
}

.feature.tiles3 .tertiary {
	width: 50%;
}

.feature.tiles3 .tertiary .tile {
	width: 100%;
}

/**
 * Variation: Wide
 */
.feature.wide {
	margin-bottom: 0;
	border-top: 4px solid #fff;
}

.feature.wide .tile {
	height: 360px;
}

.feature.wide > .tile,
.feature.wide > .tile + .tile {
	width: 33.33333%;
}

.feature.wide > .tile + .tile {
	clear: none;
}

.feature.wide .tertiary {
	width: 33.33333%;
	height: 360px;
}

.feature.wide .tertiary .tile {
	width: 100%;
	height: 50%;
}

/**
 * Variations: Wide with differing # of tiles
 */
.feature.wide.tiles1 > .tile {
	width: 100%;
}

.feature.wide.tiles1 .secondary {
	display: none;
}

.feature.wide.tiles1 .tertiary {
	display: none;
}

.feature.wide.tiles2 > .tile {
	width: 50%;
}

.feature.wide.tiles2 .secondary {
	width: 50%;
}

.feature.wide.tiles2 .secondary > .tile {
	width: 100%;
}

.feature.wide.tiles2 .tertiary {
	display: none;
}

.feature.wide.tiles3 .tertiary .tile {
	height: 100%;
}

.feature.wide.tiles3 .tertiary {
	font-size: 34px;
}

/*** Borders ***/
.feature .overlay,
.feature.tiles4 > .tile:first-child .overlay,
.feature.tiles3 > .tile:first-child .overlay,
.feature.tiles2 > .tile .overlay,
.feature.tiles1 > .tile .overlay {
	background: url("../../../img/bg-features-shadow.png") bottom left repeat-x;
	opacity: 1;
}

.feature.wide .tile:hover .overlay,
.feature.tiles4 > .tile:first-child:hover .overlay,
.feature.tiles3 > .tile:first-child:hover .overlay,
.feature.tiles2 > .tile:hover .overlay,
.feature.tiles1 > .tile:hover .overlay {
	opacity: 0.5;
}

.feature.tiles3 .tertiary .overlay,
.feature.tiles4 .tertiary .overlay,
.feature.tiles3 > .tile:first-child + .tile .overlay,
.feature.tiles4 > .tile:first-child + .tile .overlay {
	background: url("../../../img/bg-features-shadow.png") bottom left repeat-x;
}

.tiles4 .tile:first-child {
	border-right: none;
}
.tiles4 .tertiary .tile:first-child {
	border-right: 2px solid #fff;
}
.tiles4 .tertiary .tile:first-child + .tile {
	border-left: 2px solid #fff;
}

.wide .tile:first-child {
	border-right: 4px solid #fff;
}
.wide .tertiary .tile {
	border-right: 0;
	border-left: 0;
}
.wide .tertiary .tile:first-child,
.wide .tertiary .tile:first-child + .tile {
	border-left: none;
	border-right: none;
}

.tiles2 .tile:first-child + .tile {
	border-right: none;
}

.tiles3 .tile:first-child {
	border-right: none;
}
.tiles3 .tertiary .tile {
	border-right: none;
}
.tiles3.wide > .tile:first-child {
	border-right: 4px solid #fff;
}

.tiles1 .tile {
	border-right: none;
}

@media (max-width: 1023px) {
	.feature .tertiary:first-child {
		border-right: none;
	}
	.feature .tertiary:nth-child(2) {
		border-right: none;
	}
	.feature.tiles4 > .tile:first-child + .tile .overlay {
		background: url("../../../img/bg-features-shadow.png") bottom left repeat-x;
		opacity: 1;
	}
	.feature.tiles4 > .tile:first-child + .tile:hover .overlay {
		opacity: 0.5;
	}
	.tiles4 > .tile:first-child {
		border-right: 2px solid #fff;
	}
	.tiles4 > .tile:first-child + .tile {
		border-right: none;
		border-left: 2px solid #fff;
	}
	.tiles4 .tertiary .tile:first-child {
		border-right: 2px solid #fff;
	}
	.tiles4 .tertiary .tile:first-child + .tile {
		border-left: 2px solid #fff;
	}
	.tiles3.wide .tile:first-child,
	.tiles3 .tile:first-child, .tiles3.wide .tertiary .tile {
		border-right: none;
	}
}
@media (max-width: 639px) {
	.feature > .tile:first-child,
	.feature > .tile:first-child + .tile,
	.feature .tertiary .tile:first-child,
	.feature .tertiary .tile:first-child + .tile {
		border-right: none;
		border-left: none;
	}
	.feature.tiles3 .tertiary .overlay,
	.feature.tiles4 .tertiary .overlay,
	.feature.tiles3 > .tile:first-child + .tile .overlay,
	.feature.tiles4 > .tile:first-child + .tile .overlay {
		display: block;
	}
}
/********** Tablet ***********/
@media (max-width: 1023px) {
	.feature .tile,
	.feature > .tile + .tile {
		width: 50%;
		clear: none;
	}
	.feature > .tile + .tile {
		height: 360px;
	}
	.feature .tertiary {
		width: 100%;
	}
	.feature.tiles3 .tertiary {
		width: 100%;
	}
	.feature .tertiary .tile {
		height: 180px;
	}
	/**
	 * Variation: Wide
	 */
	.feature.wide > .tile,
	.feature.wide > .tile + .tile {
		width: 50%;
		height: 360px;
	}
	.feature.tiles1 > .tile {
		width: 100%;
	}
	.feature.wide .tertiary {
		width: 100%;
		height: auto;
	}
	.feature.wide .tertiary .tile {
		height: 180px;
		width: 50%;
	}
	.feature > .tile:first-child + .tile .tile-text, .feature.tiles3 .tertiary .tile .tile-text {
		padding-right: 63px;
	}
	.feature > .tile:first-child + .tile .tile-header, .feature.tiles3 .tertiary .tile .tile-header {
		font-size: 34px;
	}
	.feature > .tile:first-child + .tile .icn-bg-circle, .feature.tiles3 .tertiary .tile .icn-bg-circle {
		width: 48px;
		height: 48px;
	}
	.feature > .tile:first-child + .tile .icn-bg-circle svg, .feature.tiles3 .tertiary .tile .icn-bg-circle svg {
		width: 22px;
		height: 22px;
		margin: -10px 0 0 -10px;
	}
	/*** 3 Tile Bug Fix ***/
	.feature.tiles3 .tile:first-child {
		width: 100%;
	}
	.feature.tiles3 > .tertiary {
		width: 50%;
		height: 360px;
	}
	.feature.tiles3 > .tertiary .tile {
		height: 100%;
	}
}
/********** Phone/Mobile **********/
@media (max-width: 639px) {
	.feature .tile,
	.feature > .tile + .tile,
	.feature .tertiary .tile {
		width: 100%;
	}
	.feature.tiles3 .tertiary,
	.feature.tiles3 > .tile + .tile {
		width: 100%;
	}
	.feature.tiles3 .tertiary {
		height: 180px;
	}
	.feature.wide.tiles2 > .tile {
		width: 100%;
	}
	.feature > .tile,
	.feature > .tile + .tile {
		height: 220px;
	}
	.feature .tertiary .tile {
		height: 180px;
	}
	.feature .tile .tile-text,
	.feature > .tile:first-child .tile-text,
	.feature.wide > .tile:first-child + .tile .tile-text,
	.feature > .tile:first-child + .tile .tile-text,
	.feature.wide.tiles3 .tertiary .tile .tile-text,
	.feature.tiles3 .tertiary .tile .tile-text {
		left: 30px;
		right: 30px;
		padding-right: 37px;
	}
	.feature .tile .tile-header,
	.feature > .tile:first-child .tile-header,
	.feature.wide > .tile:first-child + .tile .tile-header,
	.feature > .tile:first-child + .tile .tile-header,
	.feature.wide.tiles3 .tertiary .tile .tile-header,
	.feature.tiles3 .tertiary .tile .tile-header {
		font-size: 22px;
		font-weight: 600;
	}
	.feature .tile .icn-bg-circle,
	.feature > .tile:first-child .icn-bg-circle,
	.feature.wide > .tile:first-child + .tile .icn-bg-circle,
	.feature > .tile:first-child + .tile .icn-bg-circle,
	.feature.wide.tiles3 .tertiary .tile .icn-bg-circle,
	.feature.tiles3 .tertiary .tile .icn-bg-circle {
		width: 32px;
		height: 32px;
	}
	.feature .tile .icn-bg-circle svg,
	.feature > .tile:first-child .icn-bg-circle svg,
	.feature.wide > .tile:first-child + .tile .icn-bg-circle svg,
	.feature > .tile:first-child + .tile .icn-bg-circle svg,
	.feature.wide.tiles3 .tertiary .tile .icn-bg-circle svg,
	.feature.tiles3 .tertiary .tile .icn-bg-circle svg {
		width: 15px;
		height: 15px;
		margin: -8px 0 0 -6px;
	}
	/**
	 * Variation: Wide
	 */
	.feature.wide > .tile,
	.feature.wide > .tile + .tile,
	.feature.wide .tertiary .tile {
		width: 100%;
	}
	.feature.wide > .tile,
	.feature.wide > .tile + .tile {
		height: 220px;
	}
	.feature.wide .tertiary .tile {
		height: 180px;
	}
	.feature.tiles2 > .tile,
	.feature.tiles2 > .tile + .tile {
		width: 100%;
		height: 220px;
	}
}
.description-tiles {
	overflow: auto;
	margin-bottom: 30px;
}

@media (max-width: 480px) {
	.description-tiles {
		margin-bottom: 0;
	}
	.description-tiles .col20 {
		padding-bottom: 20px;
	}
	.description-tiles .col20 img {
		width: 100% !important;
	}
}
.files {
	margin-bottom: 30px;
}

.ctas .thirds {
	margin-bottom: 40px;
}
.ctas .thirds img {
	width: 100%;
	margin-bottom: 20px;
}

@media (max-width: 1023px) {
	.ctas .thirds {
		width: 100%;
	}
}
body.dialoging {
	overflow: hidden;
}

dialog {
	position: fixed;
	top: 100%;
	left: 0;
	z-index: 12;
	width: 100%;
	height: 100%;
	padding: 20px;
	margin: 0;
	background: #fff;
	background: rgba(255, 255, 255, 0.98);
	border: none;
	opacity: 0;
	pointer-events: none;
}

dialog.animation {
	transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

dialog.open {
	top: 0%;
	opacity: 1;
	pointer-events: auto;
}

dialog::backdrop, dialog + .backdrop {
	top: 100%;
	background: #fff;
	opacity: 0.9;
	transition: top 0.2s ease-in-out;
}

dialog.open::backdrop, dialog.open + .backdrop {
	top: 0%;
}

dialog .close {
	outline: none;
	width: 18px;
	display: block;
	position: absolute;
	top: 30px;
	left: 30px;
}

dialog img {
	max-height: 100%;
	max-width: 100%;
}

dialog .container {
	height: 100%;
	padding: 50px 60px;
}
dialog .container .next,
dialog .container .prev {
	position: absolute;
	top: 50%;
	top: calc(50% - 20px);
	font-size: 72px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: opacity 0.1s linear;
	outline: none;
}
dialog .container .next {
	right: 30px;
}
dialog .container .next:hover {
	opacity: 0.3;
}
dialog .container .prev {
	left: 30px;
}
dialog .container .prev:hover {
	opacity: 0.3;
}

.modal-content {
	overflow-y: auto;
	height: 100%;
	text-align: center;
}
.modal-content figure {
	height: 100%;
	margin: 0;
}

@media screen and (max-width: 640px) {
	dialog .close {
		top: 20px;
		left: 20px;
	}
	dialog .container {
		padding: 50px;
	}
	dialog .container .next {
		right: 20px;
	}
	dialog .container .prev {
		left: 20px;
	}
}