/* Encorp Pacific (Canada) 2024 Site Design - Tutorials CSS */
/* Last Updated: 2025.02.14 ET */

@import url('encp_boilerplate.css');

ol.tutorial {
	max-width: 820px;
	list-style: none;
	padding: 0;
	margin: 1rem auto;
}

ol.tutorial > li {
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 2rem 0;
}

ol.tutorial > li + li {
	border-top: 1px dashed rgb(43,77,152);
	padding-top: 2rem;
}


div.visuals,
div.text {
	/* border: 1px dashed red; */
}

div.text span.adminlink {
	position: absolute;
	bottom: 10px;
	right: 0;
	transition: opacity 0.3s;
	opacity: 0;
}

li:hover > div.text span.adminlink {
	opacity: 1;
}

div.visuals > img {
	max-height: 530px;
	width: auto;
}

div.visuals > a > img {
	cursor: zoom-in;
}

div.visuals.border-D {
	background: url('/images/encp_bkgd_laptop_blk.png') no-repeat left top;
	background-size: 410px 238px;
	padding: 16px 48px 26px 48px;
}

div.visuals.border-M {
	background: url('/images/encp_bkgd_iphone_blk.png') no-repeat left top;
	background-size: 258px 530px;
	padding: 10px 12px 11px 12px;
}

div.visuals.border-D img {
	width: 314px;
	height: 196px;
	overflow: hidden;
	object-fit: contain;
}

div.visuals.border-M video {
	border-radius: 32px;
}

div.visuals.border-M img {
	width: 234px;
	height: 510px;
	border-radius: 32px;
	overflow: hidden;
	object-fit: contain;
}

div.visuals.border-M > div.corners {
	border-radius: 32px;
	overflow: hidden;
}

div.visuals.border-M > div.corners > iframe {
	display: block;
}

section > .adminlink:last-child {
	top: auto;
	bottom: 10px;
}

@media (min-width: 720px) {

	div.visuals,
	div.text {
		position: relative;
		overflow: hidden;
	}

	ol.tutorial > li:nth-child(odd) > div.visuals {
		float: left;
		margin-right: 3rem;
	}

	ol.tutorial > li:nth-child(even) > div.visuals {
		float: right;
		margin-left: 3rem;
	}

}

@media (max-width: 719px) {

	div.visuals {
		margin-bottom: 2rem;
	}

}