/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

	body
	{
		--sidebar-width: 225px;
	}


	#sidebar:after
	{
		display: none;
	}

	.slides-content .title,
	.collection-card .cc-content-wrapper .cc-name
	{
		font-size: 1.8em;
	}

	#timeline h1,
	#youtube h1,
	#social h1,
	#album .heading .name
	{
		font-size: 2em;
	}
	.slides-content .description,
	.collection-card .cc-content-wrapper .cc-description,
	footer .footer-nav li a
	{
		font-size: .9em;
	}


	.slides-content:after
	{
		--width: 180px;
	}


	footer .footer-logo
	{
		max-width: 180px;
	}


}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {


	body{
		--sidebar-width: 100%;
		padding-top: 65px;
	}



	header
	{
		display: block;
	}




	#sidebar
	{
		-moz-transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	#sidebar,
	#sidebar #sidebar-nav,
	footer .footer-wrapper
	{
		background-color: var(--color-dark);
	}
	#sidebar.visible
	{
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	#sidebar #sidebar-nav ul li a,
	footer .footer-nav li a
	{
		font-size: 1.25em;
		line-height: 50px;
	}
	#sidebar #sidebar-nav ul
	{
		top: 0;
	}



	#slides
	{
		height: calc(100vh - 65px);
	}
	.slides-content
	{
		background-color: var(--color-base);
		width: 100%;
		max-width: 100%;
		padding: 10px;
	}
	.slides-content:after
	{
		display: none;
	}
	.slides-content .title
	{
		text-align: center;
		margin: 0 auto;
		padding: 3px 0 0;
		color: white;
		font-size: 1.3em !important;
		line-height: 20px;
		color: var(--color-light-gray);
	}
	.slides-content .subtitle
	{
		text-align: center;
		font-size: .7em;
	}
	#slides .slide-link
	{
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		z-index: 1500;
	}


	#viewport
	{
		padding: 0 0 0;
	}


	.slides-content .description,
	.collection-card .cc-content-wrapper .cc-description.
	{
		font-size: .8em;
	}


	.slides-content .title,
	.collection-card .cc-content-wrapper .cc-name,
	#timeline h1,
	#youtube h1,
	#social h1,
	#album .heading .name
	{
		font-size: 1.7em;
	}

	.collection-card .cc-image-wrapper
	{
		padding: 0 0 !important;
		position: relative;
		z-index: 500;
	}
	.collection-card:nth-child(even):after
	{
		--width: 90px;
	}
	.collection-card:nth-child(odd):after
	{
		--width: 50px;
	}



	#album,
	#contact
	{
		padding: 20px 0 75px;
	}
	#album-footer
	{
		width: calc(100% - (var(--grid-margin) * 2));
		position: fixed;
		margin: 0 auto;
		bottom: 0;
		left: var(--grid-margin);
		z-index: 5000;
		padding: 10px 10px 1px;
		background-color: var(--color-light-gray);
	}
	#album-footer a img
	{
		max-width: 20px;
		margin: 0 auto 5px;
	}
	#album-footer a span
	{
		font-size: .7em;
	}


}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

	footer .footer-wrapper
	{
		padding-top: 25px;
		padding-bottom: 75px;
	}
	footer .footer-nav li
	{
		width: 100%;
		line-height: 40px;
	}
	footer .legal
	{
		font-size: .7em;
	}



}