/* Main Stylesheet */

/*---Overall Styling---*/

	html, body{
		min-height: 100%;
		height: 100%;
		background: #141726;
	}

	h1, h3, h5 {
		font-family: 'Montserrat', sans-serif;
		/*border: 2px dashed gray;*/
	}

	hr {
		margin-top: 0;
		width: 132px;
		border: 2px solid #feffff;
	}

	p {
		font-family: 'Roboto', sans-serif;
	}

	div[class*="col-"] { /* Grid visualization helper */
		/*border: 3px dashed lightgray;*/
	}

	textarea {
		resize: vertical;
	}

	input, textarea {
		/*padding-left: 2px!important;*/
		border: 2px inset #5E5E5E;
		border-radius: 5px;
		background-color: #141726;
		color: #feffff;
	}

	::-webkit-input-placeholder { /* Chrome */
	  color: #5E5E5E;
	}
	:-ms-input-placeholder { /* IE 10+ */
	  color: #5E5E5E;
	}
	::-moz-placeholder { /* Firefox 19+ */
	  color: #5E5E5E;
	  opacity: 1;
	}
	:-moz-placeholder { /* Firefox 4 - 18 */
	  color: #5E5E5E;
	  opacity: 1;
	}

	.bold-text {
		font-weight: bold;
	}

	.simple-link {
		text-decoration: none;
		color: #141726;
	}

	.simple-link:hover {
		text-decoration: none;
		color: #7385A6;
	}

	.container-fluid{
		height: 100%;
	}

/*---Language Page---*/

	#lang-page {
		height: 220px;
		width: 300px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -110px;
		margin-left: -150px;
		background-color: #feffff;
		color: #141726;
		box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.5);
	}

		#lang-menu ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		#lang-menu ul a {
			width: 70%;
			margin: 2px 0 2px 0;
		}

/*---Navigation bar---*/

	#nav-bar {
		background-color: #141726;
		color: #feffff;
		height: 60px;
		z-index: 5;
		padding-left: 8px;
		padding-right: 8px;
		padding-top: 5px;
		margin: 0 auto;
	}
		
		li>.nav-link {
			/*transition: 0.5s;*/
			margin-left: 5px;
			margin-right: 5px;
			padding-left: 0;
			padding-right: 0;
		}

		#nav-bar a {
			font-family: 'Montserrat', sans-serif;
			color: #feffff;
			font-size: 18px;
			letter-spacing: 5px;
		}

		.navbar-brand {
			font-family: 'Montserrat', sans-serif;
			font-size: 21px;
			letter-spacing: 5px;
			font-weight: bold;
		}
		
				#nav-bar-sections li a:hover {
					/*color: #141726;*/
					background-color: #141726;
					border-bottom: 5px solid #f2b632;
				}

			#nav-button {
				font-size: 30px;
			}


			#dropdown-menu {
				background-color: #141726;
			}

				#dropdown-menu li a:hover {
					/*color: #141726;*/
					background-color: #f2b632;
				}

/*---Portfolio Section---*/

	#portfolio {

		/*min-height: 100%;*/
		padding-top: 60px;

		background-color: #E0E0E0;
		z-index: 3;
	}

		.project-description {

			position: absolute;
			top:0;
			left: 0;
			height: 100%;
			width: 100%;
			
			padding: 16px;
			text-align: left;

			opacity: 0;
			transition: 0.2s;
			
			/*background-color: rgba(230, 39, 57, 0.95);*/
			background-color: rgba(0,0,0,0.9);
			color: #feffff;
		}

		.project-description:hover{
			opacity: 1;
		}

			.project-description>hr{
				margin-top: 2px;
				width: 100px;
				margin-left: 0;
			}

			.project-description>h5 {
				font-size: 16px;
			}

		.project-img-wrap{
			overflow: hidden;
			height: 360px;
		}

		@media (min-width:768px){
				.project-img-wrap{height: 270px;}
			}

		@media (min-width:992px){
				.project-img-wrap{height: 240px;}
			}

		@media (min-width:1200px){
				.project-img-wrap{height: 220px;}
			}

			.project-img{
				padding: 0;
			}

				.project-img img {
					width: 200%;
					height: auto;
					margin-left: -50%;
				}

			.center-focus{ 
				/*Specific to images that are better vertically centered*/
				margin-top: -12%;
			}

/*---Project Page---*/

	.project-page-description{
		
	}

		.project-page-description>hr{
			border: 2px solid #5E5E5E;
		}

		.project-page-img img{
			width: 100%;
		}


/*---About Section---*/

	#about {
		background-color: #333B5E;
		font-family: 'Montserrat', sans-serif;
		z-index: 4;
	}
		#profile-txt {
			margin-top: 10px;
			text-align: center;
		}

		@media (min-width:768px){
			#profile-txt{
				margin-top: 30px;
				margin-bottom: 30px;
				padding-left: 50px;
				text-align: left}
		}

		#profile-img {
			padding: 50px 0 50px 0;
		}

			#profile-img img {
				max-width: 250px;
				height: auto;
				border: 3px solid #141726;
				border-radius: 50%;
			}


/*---Contact Section---*/

	#contact {
		background-color: #333B5E;
		padding-bottom: 15px;
		z-index: 2;
	}

		#contact-text {
			text-align: center;	
			padding: 0 50px 0 50px;
		}

		@media (min-width:768px){
				#contact-text {text-align: left;}
			}

		#social-links {
			font-size: 32px;
			padding-top: 15px;
			padding-bottom: 15px;
		}

			#social-links a:link {color: #feffff;}
			#social-links a:visited {color: #feffff;}
			#social-links a:hover {color: #f2b632;}
			#social-links a:active {color: #feffff;}

		#contact-form {
			/*border: 2px dashed white;*/
		}

		#contact-form form {
			padding: 0 50px 0 50px;
		}

		#contact form>*{
			padding: 4px;
			margin-bottom: 4px;
		}
		
		/* css btn style override*/

		.btn {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
		}

		.btn-primary, .btn-primary:visited, .btn-primary:focus {
		    background: transparent;
		    color: #141726;
		    border-color: #141726;
		    border-width: 2px;
		}
		 
		.btn-primary:hover {
		    background: #7385A6;
		    border-color: #141726;
		    border-width: 2px;
		}
		 
		.btn-primary:active, .btn-primary.active {
		    background: transparent!important;
		    border-color: #141726!important;
		    border-width: 2px!important;
		}


/*---Footer---*/

	footer {

		margin-bottom: 0;
		padding-top: 15px;

		background-color: #141726;
		z-index: 1;
		color: #feffff;
	}

		footer h3{
			font-size: 18px;
			letter-spacing: 5px;
			font-weight: bold;
		}

		footer p{
			letter-spacing: 3px;
		}

		#lang-chooser ul {
			padding: 0;
		}

		#lang-chooser ul li{
			list-style-type: none;
			display: inline;
			padding: 0 10px 0 10px;
		}
		

/*Colors Used

First:
Dark-blue: #141726;
Blue: #333B5E;
Light-blue: #7385A6;
Grey: #5E5E5E;
White: #E0E0E0;

L'Avenir:
White: #E1E8F0;
Red: #E62739;
Turquoise: #6ED3CF;
Purple: #9068BE;
Gray: #55585D;
DarkGray: #4D5256;

Teye:
White: #feffff;
Light Blue: #98dafc;
Beige: #daad86;
Dark Gray: #312c32;

*/



/*Fonts Used

font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;

Reference: https://fonts.google.com/specimen/Montserrat?selection.family=Montserrat:400,700|Roboto:300;