@max-width: 1380px;
@transparent: rgba(20, 24, 25, 0.84);
@accent-color: #155399;
@link-color: #ec7c04;
@quote-color: #ACCEA4;

.text-shadow
{
	text-shadow: 0 0 4px #000;
}

body
{
	.text-shadow();
}

.background
{
	background-color: #061d36;
}

.text
{
	color: #fff;
}

.top-menu
{
	position: fixed;
	display: flex;
	flex-flow: row;
	flex-wrap: nowrap;
	justify-content: center;
	padding: 10px;
	z-index: 999;
	width: 100%;
	margin-right: 40px;
	background-color: @transparent;
	box-shadow: 2px 2px 5px 2px rgba(0,0,0, 0.2);
}

.icon-base
{
	border: 0;
	cursor: pointer;
	width: 32px;
}

.chat-icon img
{
	.icon-base();
}

	.chat-icon img:last-child
	{
		display: none;
	}

.chat-icon:active img
{
	transform: translateY(2px);
}

.resume-icon
{
	margin-left: 40px;
}

	.resume-icon img
	{
		.icon-base();
	}

		.resume-icon img:last-child
		{
			display: none;
		}

	.resume-icon a:active img
	{
		transform: translateY(2px);
	}

.linkedIn-icon
{
	margin-top: 1px;
	margin-left: 40px;
}

	.linkedIn-icon img
	{
		.icon-base();
		width: 28px;
	}

		.linkedIn-icon img:last-child
		{
			display: none;
		}

	.linkedIn-icon a:active img
	{
		transform: translateY(2px);
	}

.spacer
{
	min-height: 75px;
	position: relative;
}

.content-base
{
	padding: 0 25px 40px 100px;
	max-width: @max-width;
	margin: 0 auto;
	position: relative;
}

.flex-wrap
{
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.noselect
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.underline
{
	content: '';
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 1px;
	border-width: 0 0 3px;
	border-style: solid;
	border-color: @accent-color;
}

#introduction-ss
{
	font-family: 'Arial Nova', sans-serif;
}

	#introduction-ss .content
	{
		.content-base();
		margin-bottom: 150px;
	}

	#introduction-ss h1
	{
		letter-spacing: 7px;
		font-size: 65px;
		font-weight: 400;
		padding: 0;
		margin: 0;
	}

	#introduction-ss h2
	{
		letter-spacing: 7px;
		padding: 0;
		margin-top: -20px;
		font-size: 75px;
		font-weight: 800;
	}

	#introduction-ss .title
	{
		margin-top: -8px;
		text-align: left;
		width: 390px;
	}

		#introduction-ss .title h3
		{
			font-size: 20px;
		}

	#introduction-ss .cmd
	{
		letter-spacing: 4px;
	}

	#introduction-ss .ade
	{
		margin-top: -5px;
		letter-spacing: 2.6px;
	}

	#introduction-ss .buttons
	{
		width: 350px;
		padding-top: 30px;
		text-align: center;
	}

		#introduction-ss .buttons button
		{
			.text-shadow();
			outline-color: rgba(0, 0, 0, 0.00);
			outline-width: 0;
			margin-right: 25px;
			border: 2px solid white;
			border-radius: 16px;
			background-color: rgba(16, 79, 147, 0.32);
			color: white;
			padding: 3px 0;
			font-size: 18px;
			cursor: pointer;
			width: 140px;
		}

			#introduction-ss .buttons button:active
			{
				background-color: @link-color;
				transform: translateY(2px);
			}

#synopsis-ss
{
	font-family: 'Arial Nova', sans-serif;
}

	#synopsis-ss .content
	{
		.content-base();
		width: 100%;
	}

		#synopsis-ss .content .header
		{
			position: relative;
		}

	#synopsis-ss .header h1
	{
		display: inline;
		position: relative;
		font-size: 40px;
	}

		#synopsis-ss .header h1::after
		{
			.underline();
		}

#synopsis-ss .header h3 {
	margin-top: 8px;
	font-size: 17px;
	color: @quote-color;
}

	#synopsis-ss .about
	{
		position: relative;
	}

		#synopsis-ss .about p
		{
			font-size: 19px;
			width: 50%;
			max-width: 1075px;
		}

#education-ss
{
	font-family: 'Arial Nova', sans-serif;
}

	#education-ss .content
	{
		.content-base();
		width: 100%;
	}

		#education-ss .content .header
		{
			position: relative;
		}

			#education-ss .content .header h1
			{
				display: inline;
				position: relative;
				font-size: 40px;
			}

				#education-ss .content .header h1::after
				{
					.underline();
				}

#education-ss .content .header h3 {
	margin-top: 8px;
	font-size: 17px;
	color: @quote-color;
}

		#education-ss .content .cert-logos
		{
			.flex-wrap();
		}

			#education-ss .content .cert-logos img
			{
				margin: 10px;
				padding: 10px 0;
				width: 180px;
				filter: drop-shadow(0 0 0.25em #000000);
			}

			#education-ss .content .cert-logos div
			{
				flex: 1 0 33%;
			}

		#education-ss .content .college
		{
			.flex-wrap();
			padding-top: 70px;
			margin-left: -20px;
		}

			#education-ss .content .college .logo img
			{
				padding: 8px 8px 0 0;
				width: 70px;
			}

			#education-ss .content .college h3
			{
				margin-top: 8px;
				font-size: 15px;
			}

			#education-ss .content .college h4
			{
				font-size: 13px;
			}

#skillset-ss
{
	font-family: 'Arial Nova', sans-serif;
}

	#skillset-ss .content
	{
		.content-base();
		width: 100%;
	}

		#skillset-ss .content .header
		{
			position: relative;
		}

			#skillset-ss .content .header h1
			{
				display: inline;
				font-size: 40px;
				position: relative;
			}

				#skillset-ss .content .header h1::after
				{
					.underline();
				}

#skillset-ss .content .header h3 {
	margin-top: 8px;
	font-size: 17px;
	color: @quote-color;
}

				#skillset-ss .content .header h3 a
				{
					color: @link-color;
				}

		#skillset-ss .content .skill-container
		{
			.flex-wrap();
			margin-left: -20px;
		}

			#skillset-ss .content .skill-container .skill-set
			{
				min-width: 300px;
				padding: 30px 50px 0 50px;
				flex: 1 0 33%;
			}

#skillset-ss .skills .skill h3 {
	font-size: 16px;
}

#history-ss {
	font-family: 'Arial Nova', sans-serif;
}

	#history-ss .content
	{
		.content-base();
		width: 100%;
	}

		#history-ss .content .header
		{
			position: relative;
		}

		#history-ss .content h1
		{
			display: inline;
			position: relative;
			font-size: 40px;
		}

			#history-ss .content h1::after
			{
				.underline();
			}

		#history-ss .content .header h3
		{
			margin-top: 8px;
			font-size: 17px;
			color: @quote-color;
		}

		#history-ss .content .parts
		{
			.flex-wrap();
		}

			#history-ss .content .parts .part
			{
				.flex-wrap();
				max-width: 900px;
				padding: 20px 10px;
				justify-content: left !important;
			}

				#history-ss .content .parts .part > div
				{
					flex: 1;
				}

				#history-ss .content .parts .part .who
				{
					min-width: 250px;
					max-width: 250px;
				}

					#history-ss .content .parts .part .who h5
					{
						color: #fff;
						font-weight: 800;
					}

					#history-ss .content .parts .part .who h6
					{
						color: #E6E6E6;
						font-size:17px;
					}

				#history-ss .content .parts .part .what h5
				{
					color: #fff;
					font-weight: 800;
				}

				#history-ss .content .parts .part .what p
				{
					padding-bottom: 10px;
					color: #E6E6E6;
					font-size: 17px;
				}

#history-ss .content .parts .part .where {
	.flex-wrap();
	justify-content: flex-start;
	align-content: flex-start;
	color: #8BB3CB;
	font-size: 17px;
}

					#history-ss .content .parts .part .where a
					{
						color: #8BB3CB;
					}

@media (hover: hover) and (pointer: fine)
{
	.chat-icon:hover img:last-child
	{
		display: block;
	}

	.chat-icon:hover img:first-child
	{
		display: none;
	}

	.resume-icon a:hover img:last-child
	{
		display: block;
	}

	.resume-icon a:hover img:first-child
	{
		display: none;
	}

	.linkedIn-icon a:hover img:last-child
	{
		display: block;
	}

	.linkedIn-icon a:hover img:first-child
	{
		display: none;
	}

	#introduction-ss .buttons button:hover
	{
		background-color: @accent-color;
	}
}

@media (max-width: 860px)
{
	/*.parallax-mirror
	{
		left: -10% !important;
		width: 110% !important;
	}*/
}

@media (max-width: 800px)
{
	#history-ss .content .parts .part
	{
		display: block;
		padding-right: 20px;
	}

		#history-ss .content .parts .part .who
		{
			padding-bottom: 10px;
		}

			#history-ss .content .parts .part .who h5 br
			{
				display: none;
				visibility: hidden;
				content: ' ';
			}

				#history-ss .content .parts .part .who h5 br:after
				{
					content: ' ';
				}
}

@media (max-width: 650px)
{
	/*.parallax-mirror
	{
		left: -20% !important;
		width: 120% !important;
	}*/
}

@media (max-width: 575px)
{
	#introduction-ss .content,
	#synopsis-ss .content,
	#education-ss .content,
	#skillset-ss .content,
	#history-ss .content
	{
		padding-left: 45px;
	}

	#synopsis-ss .about p
	{
		font-size: 15px;
		width: 60%;
	}
}

@media (max-width: 565px)
{
	/*.parallax-mirror
	{
		left: -30% !important;
		width: 130% !important;
	}*/
}

@media (max-width: 501px)
{
	.top-menu
	{
		justify-content: left;
		padding-left: 30px;
	}

	#education-ss .content .cert-logos img
	{
		width: 140px;
	}

	#education-ss .content .cert-logos div
	{
		flex: 1 0 50%;
	}

	#history-ss .content .parts .part .where div
	{
		flex: 1 0 100%;
	}

	#history-ss .content .parts .part .where .where-spacer
	{
		display: none;
		visibility: hidden;
	}
}

@media (max-width: 480px)
{
	/*.parallax-mirror
	{
		left: -40% !important;
		width: 140% !important;
	}*/
}

@media (max-width: 435px)
{
	#introduction-ss h1
	{
		font-size: 40px;
	}

	#introduction-ss h2
	{
		margin-top: -15px;
		font-size: 50px;
	}

	#introduction-ss .title
	{
		width: 260px;
	}

		#introduction-ss .title h3
		{
			font-size: 11px;
		}

	#introduction-ss .cmd
	{
		letter-spacing: 3.85px;
	}

	#introduction-ss .ade
	{
		letter-spacing: 2.8px;
	}

	#introduction-ss .buttons
	{
		width: 300px;
		padding-top: 20px;
		margin-left: -10px;
	}

		#introduction-ss .buttons button
		{
			width: 120px;
			font-size: 15px;
			margin-right: 20px;
		}

	#synopsis-ss .about p
	{
		font-size: 15px;
		width: 75%;
	}
}

@media (max-width: 400px)
{
	#synopsis-ss .about p
	{
		font-size: 15px;
		width: 95%;
	}

	#education-ss .content .cert-logos
	{
		margin-left: -5px;
	}

		#education-ss .content .cert-logos img
		{
			margin: 10px 5px;
			width: 115px;
		}

	#education-ss .content .college
	{
		margin-left: -10px;
	}

		#education-ss .content .college .logo img
		{
			padding-top: 3px;
			width: 52px;
		}

		#education-ss .content .college h2
		{
			font-size: 1.5rem;
		}

		#education-ss .content .college h3
		{
			margin-top: 5px;
			margin-left: -10px;
			font-size: 13px;
		}

		#education-ss .content .college h4
		{
			margin-left: -10px;
			font-size: 12px;
		}
}