/**************************************************************************
Name:			latestGreatest.css
Description:	Styling for the "Latest and Greatest" sections.
Date Created: 	02.06.2020 Brynn Chivers
Modified:
**************************************************************************/

.latestAndGreatestWrapper
{
	/*height: 720px;*/
    height: 480px;
	overflow: hidden;
	position: relative;

	width: 100%;
}

.lgBackgroundImage
{
	height: inherit;
}

.lgBackgroundImage .client-image
{
	height: 100%;
	width: 100%;
	opacity: .32;

	-ms-flex-item-align: center;
	 -ms-grid-row-align: center;
			 align-self: center;

	-webkit-box-flex: 1;
			-ms-flex: 1 0 auto;
				flex: 1 0 auto;

	-o-object-fit: cover;

	   object-fit: cover;
}

.lgContainer
{
	position: absolute;
	bottom: 40px;
	right: 40px;
	width: 66vw;

	height: 100%;
	max-height: 450px;
	overflow: hidden;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
}

.lgContainer .section
{
	width: 50%;
	margin: 0 15px;
	-webkit-box-flex: 0;
	    -ms-flex: 0 1 50%;
	        flex: 0 1 50%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.lgContainer .user-content-scrollbar-wrapper
{
	border-radius: 8px;
	overflow: hidden;
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 100%;
	        flex: 1 1 100%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
}

.lgContainer .user-content-wrapper
{
	position: relative;
	margin: 15px;
	padding-right: 10px;
	overflow: hidden;

	-webkit-box-flex: 1;

	    -ms-flex: 1 1 100%;

	        flex: 1 1 100%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}
.lgContainer .user-content-wrapper:active,
.lgContainer .user-content-wrapper:focus,
.lgContainer .user-content-wrapper:hover
{
	overflow-y: auto;
}

.latestContainer .user-content-scrollbar-wrapper,
.latestContainer .user-content-wrapper
{
	background:
		/* Shadow covers */
		-o-linear-gradient(#007550 30%, rgba(0, 117, 80, 0)),
		-o-linear-gradient(rgba(0, 117, 80, 0), #007550 70%) 0 100%,

		/* Shadows */
		-o-radial-gradient(50% 0, farthest-side, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)),
		-o-radial-gradient(50% 100%, farthest-side, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)) 0 100%;

	background:
		/* Shadow covers */
		-o-linear-gradient(#007550 30%, rgba(0, 117, 80, 0)),
		-o-linear-gradient(rgba(0, 117, 80, 0), #007550 70%) 0 100%,

		/* Shadows */
		-o-radial-gradient(50% 0, farthest-side, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)),
		-o-radial-gradient(50% 100%, farthest-side, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)) 0 100%;

	background:
		/* Shadow covers */
		-webkit-gradient(linear, left top, left bottom, color-stop(30%, #007550), to(rgba(0, 117, 80, 0))),
		-webkit-gradient(linear, left top, left bottom, from(rgba(0, 117, 80, 0)), color-stop(70%, #007550)) 0 100%,

		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)),
		radial-gradient(farthest-side at 50% 100%, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)) 0 100%;

	background:
		/* Shadow covers */
		-o-linear-gradient(#007550 30%, rgba(0, 117, 80, 0)),
		-o-linear-gradient(rgba(0, 117, 80, 0), #007550 70%) 0 100%,

		/* Shadows */
		-o-radial-gradient(50% 0, farthest-side, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)),
		-o-radial-gradient(50% 100%, farthest-side, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)) 0 100%;

	background:
		/* Shadow covers */
		linear-gradient(#007550 30%, rgba(0, 117, 80, 0)),
		linear-gradient(rgba(0, 117, 80, 0), #007550 70%) 0 100%,

		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)),
		radial-gradient(farthest-side at 50% 100%, rgba(1, 183, 125, .5), rgba(1, 183, 125, 0)) 0 100%;
	background-repeat: no-repeat;
	background-color: #007550;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}

/* NEEDS NEW SCROLL FADE COLOR */
.greatestContainer .user-content-scrollbar-wrapper,
.greatestContainer .user-content-wrapper
{
	/* REPLACE [84, 119, 155] WITH SCROLL COLOR*/

	background:
		/* Shadow covers */
		-o-linear-gradient(#2A5582 30%, rgba(42, 85, 130, 0)),
		-o-linear-gradient(rgba(42, 85, 130, 0), #2A5582 70%) 0 100%,

		/* Shadows */
		-o-radial-gradient(50% 0, farthest-side, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)),
		-o-radial-gradient(50% 100%, farthest-side, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)) 0 100%;

	background:
		/* Shadow covers */
		-o-linear-gradient(#2A5582 30%, rgba(42, 85, 130, 0)),
		-o-linear-gradient(rgba(42, 85, 130, 0), #2A5582 70%) 0 100%,

		/* Shadows */
		-o-radial-gradient(50% 0, farthest-side, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)),
		-o-radial-gradient(50% 100%, farthest-side, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)) 0 100%;

	background:
		/* Shadow covers */
		-webkit-gradient(linear, left top, left bottom, color-stop(30%, #2A5582), to(rgba(42, 85, 130, 0))),
		-webkit-gradient(linear, left top, left bottom, from(rgba(42, 85, 130, 0)), color-stop(70%, #2A5582)) 0 100%,

		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)),
		radial-gradient(farthest-side at 50% 100%, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)) 0 100%;

	background:
		/* Shadow covers */
		-o-linear-gradient(#2A5582 30%, rgba(42, 85, 130, 0)),
		-o-linear-gradient(rgba(42, 85, 130, 0), #2A5582 70%) 0 100%,

		/* Shadows */
		-o-radial-gradient(50% 0, farthest-side, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)),
		-o-radial-gradient(50% 100%, farthest-side, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)) 0 100%;

	background:
		/* Shadow covers */
		linear-gradient(#2A5582 30%, rgba(42, 85, 130, 0)),
		linear-gradient(rgba(42, 85, 130, 0), #2A5582 70%) 0 100%,

		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)),
		radial-gradient(farthest-side at 50% 100%, rgba(84, 119, 155, .5), rgba(84, 119, 155, 0)) 0 100%;
	background-repeat: no-repeat;
	background-color: #2A5582;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}

/* SCROLL BAR STYLING */
	.lgContainer .user-content-wrapper::-webkit-scrollbar-track
	{
		/* Part of the back track */
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0);
	}

	.lgContainer .user-content-wrapper::-webkit-scrollbar
	{
		/* Part of the back track */
		width: 5px;
		width: .5rem;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0);
	}

	.lgContainer .user-content-wrapper::-webkit-scrollbar-thumb
	{
		/* Scroller bar on top */
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
		background-color: rgba(255, 255, 255, .4);
	}

/* FONTS */
.lgContainer,
.lgContainer p
{
	color: #FFFFFF;
	font-size: 17px;
	line-height: 20px;
	font-weight: 400;
	font-family: aller;
	letter-spacing: .17px;
}

.lgContainer a
{
	color: #74B6D8;
}

.lgContainer h3
{
	margin: 0;

	font-size: 50px;
	line-height: 55px;
	font-family: "acumin-pro-condensed-n7", "acumin-pro-condensed", sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
}

.lgContainer .latestContainer h3
{
	color: #007550;
}

.lgContainer .greatestContainer h3
{
	color: #2A5582;
}

.lgContainer .user-content-wrapper li
{
	margin: 7px 0;
}

@media only screen and (max-width: 970px)
{
	.lgContainer
	{
		left: 40px;
		width: unset;
	}
}

@media only screen and (max-width: 768px)
{
	.latestAndGreatestWrapper
	{
		height: initial;
		margin: 40px 0;
	}
	.lgBackgroundImage
	{
		display: none;
	}
	.lgContainer
	{
		position: relative;
		left: unset;
		right: unset;
		bottom: unset;

		width: 100vw;
		max-height: unset;

		-webkit-box-orient: vertical;

		-webkit-box-direction: normal;

		    -ms-flex-direction: column;

		        flex-direction: column;
	}

	.lgContainer .section
	{
		width: unset;
	}

	.lgContainer .user-content-scrollbar-wrapper
	{
		max-height: 450px;
	}

}