/* DESKTOP LARGE */
/* Overrides for resolutions above 1680px */

@media screen and (min-width: 1680px)
{
}

/* DESKTOP + GLOBAL */
/* Settings for 1180px and above */

@media screen and (min-width: 1180px)
{
	.images
	{
		padding: 0 2.5rem;
	}

	.images img:last-child
	{
		margin-bottom: 2.5rem;
	}

	.third
	{
		width: calc(100% / 3);
	}
}


/* DESKTOP SMALL */
/* Settings for over 1000px and under 1180px */

@media screen and (min-width: 1000px) and (max-width: 1179px)
{
	*[class^='padded']
	{
		padding: 0 7.5rem;
	}

	.third
	{
		width: calc(100% / 3);
	}
}


/* TABLET + SMALL DESKTOP */
/* Settings and/or overrides (over 640 and under 1000px) */

@media screen and (min-width: 640px) and (max-width: 999px)
{
	.mobile_only
	{
		display: block;
	}

	.desktop_only
	{
		display: none;
	}
	
	*[class^='padded']
	{
		padding: 0 5rem;
	}

	*[class^='split']
	{
		width: 24%;
	}

	*[class^='split'] p
	{
		padding: 2.5rem;
	}
	
	.portrait
	{
		width: 52%;
	}


	/* project stuff */

	project.tall name, project.tall pic
	{
		width: 50%;
	}

	project.wide pic
	{
		height: 100%;
	}

	project.wide img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	project.tall img, project.wide img
	{
		padding: 7.5rem 0;
	}


	/* lightbox stuff */

	.content
	{
		padding: 5rem 2.5rem 2.5rem 2.5rem;
	}

	.third
	{
		width: calc(100% / 3);
	}
}


/* SMARTPHONE + TABLETS in PORTRAIT MODE */
/* Settings and/or overrides (under 640px) */

@media screen and (max-width: 639px), (hover: none) and (orientation: portrait)
{

	/* layout, slides and text stuff */

	.mobile_only
	{
		display: block;
	}

	.desktop_only
	{
		display: none;
	}

	*[class^='split']
	{
		width: 100%;
		height: 10rem;
	}

	.split_left
	{
		top: 0;
		left: 0;
	}
	
	.split_right
	{
		left: 0;
		bottom: 0;
	}

	.split_left p
	{
		bottom: 1.25rem;
		top: auto;
		transform: translate(-50%,0);
	}

	.split_right p
	{
		top: 1.25rem;
		bottom: auto;
		transform: translate(-50%,0);
	}
	
	.portrait
	{
		width: 100%;
		height: 100%;
	}

	.portrait img
	{
		width: 100%;
		height: 100%;
		padding: 10rem 0;
		object-fit: cover;
	}

	.lefty
	{
		text-align: center;
	}

	p.large, .content p
	{
		font-size: 1.25rem;
	}

	#upper a, #lower a, p.scroll_advice, .back a
	{
		font-size: 0.875rem;
	}

	*[class^='padded']
	{
		padding: 0 1.25rem;
	}


	/* overlay stuff */

	img.brand
	{
		content: url('../img/ui/upgrade-logo-mark.svg');
	}


	/* project stuff */

	project
	{
		display: block;
	}

	project name
	{
		position: absolute;
		bottom: 0;
		top: auto;
		height: 5rem;
	}

	project name p
	{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	project.tall name, project.wide name, project.wide pic, project.tall pic
	{
		width: 100%;
	}

	project.wide img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	project.tall img, project.wide img
	{
		padding: 5rem 0;
	}
	

	/* header and footer stuff */

	#upper
	{
		top: 0.3125rem;
	}

	#upper img
	{
		height: 3.75rem;
	}

	#lower
	{
		bottom: 2rem; // double the upper to account for bottom pos
	}


	/* lightbox stuff */

	.content
	{
		padding: 5rem 1.25rem 2.5rem 1.25rem;
	}
	
	.third
	{
		width: 100%;
	}
}