/*!
    Title: Dev Portfolio Template
    Version: 1.2.2
    Last Change: 03/25/2020
    Author: Ryan Fitzgerald
    Repo: https://github.com/RyanFitzgerald/devportfolio-template
    Issues: https://github.com/RyanFitzgerald/devportfolio-template/issues

    Description: This file contains all the styles associated with the page
    that don't come from third party libraries. This file gets compiled using
    Gulp and send to the /css folder which is then loaded on the page.
*/


body{

	font-family:'Lato', sans-serif;
	font-size:16px;
	background-color: #E3E3E3;
	}
	
	body.active
	{
		
		overflow:hidden;
		z-index:-1
		
	}
		
	.no-js #experience-timeline>div
	
	{
		background:#fff;
		padding:10px;
		margin-bottom:10px;
		border:1px solid #ffffff
	}
	
	.no-js #experience-timeline>div h3
	
	{
		font-size:1.5em;
		font-weight:300;
		color:#374054;
		display:inline-block;
		margin:0
	}
	
	.no-js #experience-timeline>div h4
	
	{
		font-size:1.2em;
		font-weight:300;
		color:#7e8890;
		margin:0 0 15px 0
	}
	
	.no-js #experience-timeline>div p
	
	{
		color:#74808a;
		font-size:0.9em;
		margin:0
	}
	
	.no-js #experience-timeline:before,
	.no-js #experience-timeline:after
	{
		content:none
	}
	
	@keyframes dropHeader
	
	{
		0%
		{
			transform:translateY(-100%)
		}
		100%
		{
			transform:translateY(0)
		}
	}
	
	header
	
	{
		position:absolute;
		top:0;
		left:0;
		right:0;
		text-align:center;
		z-index:10;
		animation-name:dropHeader;
		animation-iteration-count:1;
		animation-timing-function:ease;
		animation-duration:0.75s
	}
	
	header ul
	
	{
		display:inline-block;
		background:#fff;
		text-align:center;
		padding:10px;
		margin:0;
		border-bottom-right-radius:4px;
		border-bottom-left-radius:4px
	}
	
	header li
	
	{
		display:inline-block
	}
	
	header a
	
	{
		display:block;
		color:#000000;
		padding:10px
	}
	
	header a:hover
	
	{
		color:#424F58;
		text-decoration:none;
		background:#eee;
		border-radius:4px
	}
	
	header a:focus
	
	{
		color:#000000;
		text-decoration:none
	}
	
	header.active
	
	{
		display:block
	}
	
	header.sticky
	
	{
		position:fixed;
		z-index:999
	}
	
	#menu.active
	
	{
		display:block
	}
	
	#mobile-menu-open
	
	{
		display:none;
		cursor:pointer;
		position:fixed;
		right:15px;
		top:10px;
		color:#000000;
		font-size:1.5em;
		z-index:20;
		padding:0 7px;
		border-radius:4px;
		background:#fff
	}
	
	#mobile-menu-close
	
	{
		display:none;
		text-align:right;
		width:100%;
		background:#fff;
		font-size:1.5em;
		padding-right:15px;
		padding-top:10px;
		cursor:pointer;
		color:#000000
	}
	
	#mobile-menu-close span
	
	{
		font-size:0.5em;
		text-transform:uppercase
	}
	
	#mobile-menu-close i
	
	{
		vertical-align:middle
	}
	
	footer
	
	{
		padding:50px 0
	}
	
	.copyright
	
	{
		padding-top:20px
	}
	
	.copyright p
	
	{
		margin:0;
		color:#74808a
	}
	
	.top
	
	{
		text-align:center
	}
	
	.top span
	
	{
		cursor:pointer;
		display:block;
		margin:15px auto 0 auto;
		width:35px;
		height:35px;
		border-radius:50%;
		border:3px solid #b9bfc4;
		text-align:center
	}
	
	.top i
	
	{
		color:#74808a
	}
	
	.social
	
	{
		text-align:right
	}
	
	.social ul
	
	{
		margin:5px 0 0 0;
		padding:0
	}
	
	.social li
	
	{
		display:inline-block;
		font-size:1.25em;
		list-style:none
	}
	
	.social a
	
	{
		display:block;
		color:#74808a;
		padding:10px
	}
	
	.social a:hover
	
	{
		color:#000000
	}
	
	.btn-rounded-white
	
	{
		display:inline-block;
		color:#fff;
		padding:15px 25px;
		border:3px solid #fff;
		border-radius:30px;
		transition:.5s ease all
	}
	
	.btn-rounded-white:hover
	
	{
		color:#000000;
		background:#fff;
		text-decoration:none
	}
	
	.shadow
	
	{
		box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)
	}
	
	.shadow-large
	
	{
		box-shadow:0 3px 6px rgba(0,0,0,0.08),0 3px 6px rgba(0,0,0,0.15)
	}
	
	.heading
	
	{
		position:relative;
		display:inline-block;
		font-size:2em;
		font-weight:300;
		margin:0 0 30px 0
	}
	
	.heading:after
	
	{
		position:absolute;
		content:'';
		top:100%;
		height:1px;
		width:50px;
		left:0;
		right:0;
		margin:0 auto;
		background:#000000
	}
	
	.background-alt
	
	{
		background:#ffffff
	}
	
	#lead
	
	{
		position:relative;
		height:100vh;
		min-height:500px;
		max-height:1080px;
		background:url(../Files/lead-bg.jpg);
		background-size:cover;
		padding:15px;overflow:hidden
	}
		
	#lead-content
	
	{
		position:absolute;
		z-index:10;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		text-align:center
	}
	
	#lead-content h1,
	#lead-content h2
	
	{
		margin:0
	}
	
	#lead-content h1
	
	{
		color:#fff;
		font-weight:900;
		font-size:5em;
		text-transform:uppercase;
		letter-spacing:0.05em;
		line-height:0.9em
	}
	
	#lead-content h2
	
	{
		color:#ffffff;
		font-weight:500;
		font-size:2.25em;
		margin-bottom:15px
	}
	
	#lead-overlay
	
	{
		position:absolute;
		height:100%;
		width:100%;
		top:0;
		right:0;
		bottom:0;
		left:0;
		background:rgba(28,36,41,0.8);
		z-index:1
	}
	
	#lead-down
	
	{
		position:absolute;
		left:0;
		right:0;
		width:100%;
		text-align:center;
		z-index:10;
		bottom:15px;
		color:#fff
	}
	
	#lead-down span
	
	{
		cursor:pointer;
		display:block;
		margin:0 auto;
		width:35px;
		height:35px;
		border-radius:50%;
		border:3px solid #ffffff;
		text-align:center
	}
	
	#lead-down i
	
	{
		animation:pulsate 1.5s ease;
		animation-iteration-count:infinite;
		padding-top:5px
	}
	
	@keyframes pulsate
	
	{
		0%
		{
			transform:scale(1, 1)
		}
		50%
		{
			transform:scale(1.2, 1.2)
		}
		100%
		{
			transform:scale(1, 1)
		}
	}
	
	#about
	
	{
		padding:75px 15px;
		border-bottom:1px solid #ffffff
	}
	
	#about h2
	
	{
		color:#374054
	}
	
	#about p
	
	{
		color:#74808a;
		margin:0
	}
	
	#experience
	
	{
		padding:50px 15px;
		text-align:center;
		border-bottom:1px solid #ffffff
	}
	
	#experience h2
	
	{
		color:#374054
	}
	
	#experience-timeline
	
	{
		margin:30px auto 0 auto;
		position:relative;
		max-width:1000px
	}
	
	#experience-timeline:before
	
	{
		position:absolute;
		content:'';
		top:0;
		bottom:0;
		left:303px;
		right:auto;
		height:100%;
		width:3px;
		background:#000000;
		z-index:0
	}
	
	#experience-timeline:after
	
	{
		position:absolute;
		content:'';
		width:3px;
		height:40px;
		background:#000000;
		background:linear-gradient(to bottom, #000000, rgba(0,0,0,0));
		top:100%;
		left:303px
	}
	
	.vtimeline-content
	
	{
		margin-left:350px;
		background:#fff;
		border:1px solid #ffffff;
		padding:15px;
		border-radius:3px;
		text-align:left
	}
	
	.vtimeline-content h3
	
	{
		font-size:1.5em;
		font-weight:300;
		color:#374054;
		display:inline-block;
		margin:0
	}
	
	.vtimeline-content h4
	
	{
		font-size:1.2em;
		font-weight:300;
		color:#7e8890;
		margin:0 0 15px 0
	}
	
	.vtimeline-content p
	
	{
		color:#74808a;
		font-size:0.9em;
		margin:0
	}
	
	.vtimeline-point
	
	{
		position:relative;
		display:block;
		vertical-align:top;
		margin-bottom:30px
	}
	
	.vtimeline-icon
	
	{
		position:relative;
		color:#fff;
		width:50px;
		height:50px;
		background:#000000;
		border-radius:50%;
		float:left;
		z-index:99;
		margin-left:280px
	}
	
	.vtimeline-icon i
	
	{
		display:block;
		font-size:2em;
		margin-top:10px
	}
	
	.vtimeline-date
	
	{
		width:260px;
		text-align:right;
		position:absolute;
		left:0;
		top:10px;
		font-weight:300;
		color:#374054
	}
	
	#education
	
	{
		padding:50px 15px 20px 15px;
		border-bottom:1px solid #dcd9d9;
		text-align:center
	}
	
	#education h2
	
	{
		color:#374054;
		margin-bottom:50px
	}
	
	.education-block
	
	{
		max-width:700px;
		margin:0 auto 30px auto;
		padding:15px;
		border:1px solid #BFBFBF;
		text-align:left
	}
	
	.education-block h3
	
	{
		font-weight:500;
		float:left;
		margin:0;
		color:#374054
	}
	
	.education-block span
	
	{
		color:#74808a;
		float:right
	}
	
	.education-block h4
	
	{
		color:#74808a;
		clear:both;
		font-weight:500;
		margin:0 0 15px 0
	}
	
	.education-block p,
	.education-block ul
	
	{
		margin:0;color:#74808a;
		font-size:0.9em
	}
	
	.education-block ul
	
	{
		padding:0 0 0 15px
	}
	
	#projects
	
	{
		padding:50px 15px;
		border-bottom:1px solid #ffffff;
		text-align:center
	}
	
	#projects h2
	
	{
		color:#374054;
		margin-bottom:50px
	}
	
	.project
	
	{
		position:relative;
		max-width:900px;
		margin:0 auto 30px auto;
		overflow:hidden;
		background:#fff;
		border-radius:4px
	}
	
	.project-image
	
	{
		float:left
	}
	
	.project-info
	
	{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		margin-left:300px;
		padding:15px
	}
	
	.project-info h3
	
	{
		font-size:1.5em;
		font-weight:300;
		color:#374054;
		margin:0 0 15px 0
	}

	.project-info ul {
    	text-align: left;
	color:#74808a;
	}
	
	.project-info p
	
	{
		color:#74808a;
		margin:0 0 15px 0;
		font-size:0.9em
	}

	.project-info a
	
	{
		color:#767676;
	}
	
	.no-image
	.project-info
	
	{
		position:relative;
		margin:0;
		padding:30px 15px;
		transform:none
	}
	
	#more-projects
	
	{
		display:none
	}
	
	#skills
	
	{
		padding:50px 15px;
		text-align:center
	}
	
	#skills h2
	
	{
		color:#374054;
		margin-bottom:50px
	}
	
	#skills ul
	
	{
		display:block;
		margin:0 auto;
		padding:0;
		max-width:800px
	}
	
	#skills li
	
	{
		display:inline-block;
		margin:7px;
		padding:5px 10px;
		color:#374054;
		background:#bfbfbf;
		list-style:none;
		cursor:default;
		font-size:1.2em
	}
	
	#contact
	
	{
		padding:50px 15px;
		background:#000000;
		text-align:center
	}
	
	#contact h2
	
	{
		margin:0 0 15px 0;
		color:#fff;
		font-weight:500
	}
	
	#contact-form
	
	{
		max-width:500px;
		margin:0 auto
	}
	
	#contact-form input,
	#contact-form textarea
	
	{
		display:block;
		width:100%;
		padding:10px;
		border-radius:4px;
		border:none;
		margin-bottom:10px;
		background:#666666;
		color:#fff;
		transition:.5s ease all
	}
	
	#contact-form input::-webkit-input-placeholder,
	#contact-form textarea::-webkit-input-placeholder
	
	{
		color:#fff
	}
	
	#contact-form input:-moz-placeholder,
	#contact-form textarea:-moz-placeholder
	
	{
		color:#fff;
		opacity:1
	}
	
	#contact-form input::-moz-placeholder,
	#contact-form textarea::-moz-placeholder
	
	{
		color:#fff;
		opacity:1
	}
	
	#contact-form input:-ms-input-placeholder,
	#contact-form textarea:-ms-input-placeholder
	
	{
		color:#fff
	}
	
	#contact-form input:focus,
	#contact-form textarea:focus
	
	{
		outline:none;
		background:#808080
	}
	
	#contact-form textarea
	
	{
		height:150px;
		resize:none
	}
	
	#contact-form button
	
	{
		display:block;
		width:100%;
		background:#fff;
		border-radius:4px;
		padding:5px 10px;
		border:none;
		color:#000000;
		font-weight:700;
		box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
		/*box-shadow:0 1px 3px rgba(255,255,255,255),0 1px 2px rgba(182,182,182,182);*/
		transition:.5s ease all
	}
	
	#contact-form button:hover
	
	{
		box-shadow:0 10px 20px rgba(255,255,255,255),0 6px 6px rgba(182,182,182,182)}.optional-section{padding:50px 15px;
		text-align:center;
		border-top:1px solid #ffffff
	}
	
	.optional-section h2
	
	{
		color:#374054
	}
	
	.optional-section-block
	
	{
		max-width:700px;
		margin:0 auto 30px auto;
		padding:15px;
		border:1px solid #ffffff;
		background:#fff;
		text-align:left
	}
	
	.optional-section-block h3
	
	{
		font-weight:500;
		margin:0 0 15px 0;
		color:#374054
	}
	
	.optional-section-block h4
	
	{
		color:#74808a;
		clear:both;
		font-weight:500;
		margin:0 0 15px 0
	}
	
	.optional-section-block p,
	.optional-section-block ul
	
	{
		margin:0 0 15px 0;
		color:#74808a;
		font-size:0.9em
	}
	
	.optional-section-block ul
	
	{
		padding:0 0 0 15px
	}
	
	@media only screen and (max-width: 750px)
	
	{
		#experience-timeline:before,
		#experience-timeline:after
		
		{
			left:23px
		}
		
		.vtimeline-date
		
		{
			width:auto;
			text-align:left;
			position:relative;
			margin-bottom:15px;
			display:block;
			margin-left:70px
		}
		
		.vtimeline-icon
		
		{
			margin-left:0
		}
		
		.vtimeline-content
		
		{
			margin-left:70px
		}
	}
	
	@media only screen and (max-width: 992px)
	
	{
		#lead
		
		{
			height:auto;
			min-height:auto;
			max-height:auto;
			padding:100px 15px
		}
		
		#lead-content
		
		{
			position:relative;
			transform:none;
			left:auto;
			top:auto
		}
		
		#lead-content h1
		
		{
			font-size:3em
		}
		
		#lead-content h2
		
		{
			font-size:1.75em
		}
		
		#about
		
		{
			text-align:center
		}
		
		#about p
		
		{
			text-align:left
		}
		
	}
	
	@media only screen and (max-width: 768px)
	
	{
		header
		
		{
			position:fixed;
			display:none;
			z-index:999;
			animation:none;
			bottom:0;
			height:100%
		}
		
		#mobile-menu-open,
		#mobile-menu-close
		
		{
			display:block
		}
		
		#menu
		
		{
			height:100%;
			overflow-y:auto;
			box-shadow:none;
			border-radius:0;
			width:100%
		}
		
		#menu li
		
		{
			display:block;
			margin-bottom:10px
		}
		
		#lead-content h1
		
		{
			font-size:2em
		}
		
		#lead-content h2
		
		{
			font-size:1.3em
		}
		
		#lead-content a
		
		{
			padding:10px 20px
		}
		
		#lead-down
		
		{
			display:none
		}
		
		.education-block h3,
		.education-block span
		
		{
			float:none
		}
		
		.project-image
		
		{
			display:none
		}
		
		.project-info
		
		{
			position:relative;
			margin:0;
			padding:30px 15px;
			top:auto;
			transform:none
		}
		
		footer
		
		{
			text-align:center
		}
		
		.social
		
		{
			text-align:center
		}
		
	}
	
	@media only screen and (max-width: 480px)
	
	{
		#lead-content h1
		
		{
			font-size:1.5em
		}
		
		#lead-content h2
		
		{
			font-size:1em
		}
		
		#lead-content a
		
		{
			font-size:0.9em;
			padding:5px 10px
		}
	}