.tutorial {

	@import "../root/elements";

	.sidebar-offset {
		padding-top: 0px;
	}

	.container {
		width: 100%;
		max-width: 750px;

		padding: calc(1.5rem * #{$lineHeight}) calc(1rem * #{$lineHeight});
	}

	.container .card {
		max-width: 100%;
		padding: calc(1rem * #{$lineHeight}) calc(1rem * #{$lineHeight});

		@media (min-width: 960px) {
			max-width: calc(34rem + 10rem);
			padding: calc(1rem * #{$lineHeight}) calc(2rem * #{$lineHeight});
		}
	}

	.container .content section:last-child {
		margin: 0;
	}

	.container .content a {
		@include anim(none);
		color: $accent;
		text-decoration: none;
		border-bottom-width: 0px;
	}
	.container .content a:hover {
		color: rgba($accent, 0.6);
	}

	.container .content .aside {
		margin: calc(2rem * #{$lineHeight}) 0;

		p,
		li,
		li label {
			font-size: 0.8125rem;
		}

		h6 {
			font-size: 1rem;
		}

		ul.radio-group li label {
			padding-left: 1.75rem;
		}
	}

	.container .content figure {
		text-align: left;
		padding: 0;
	}

	.container .content figure img {
		max-width: 100%;
		width: auto;
		left: 0;
	}

	//page-nav
	.tutorial-page-nav {
		text-align: center;
		margin-top: 36px;

		.btn {
			margin: 0 6px 12px;
			font-size: 1rem;

			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

}

//ANIMATIONS
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeInToRight {
	0% {
		-webkit-transform: translate3d(-252px, 0, 0);
		opacity: 0;
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes fadeInToRight {
	0% {
		transform: translate3d(-252px, 0, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}