body {
		background: rgb(225,225,225) url("../images/backgrounds/005.jpg") 25% center no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

/**************************************************
	hero image
**************************************************/

	#hero-img {
		height: 100vh;
	}
	
	#hero-img .flex-col {
		align-items: center;
		background: rgba(30,30,30,0.5);
		flex-basis: 100%;
		justify-content: center;
	}
	
	#hero-img .logo {
		max-width: 25rem;
		width: 90%;
	}
	
		@media only screen and (min-width: 750px) {
				
				#hero-img .logo {
					max-width: 30rem;
				}
				
			}
		
		.down-arrow {
			max-width: 5rem;
		}

/**************************************************
	about section
**************************************************/

	#about {
		background: rgb(30,30,30);
	}
	
	#about .flex-col {
		align-items: center;
		flex-basis: 600px;
		flex-grow: 1;
		justify-content: center;
	}
	
		@media only screen and (max-width: 1199px) {
	
			#about .col-L.wrapper {
				padding-bottom: 0;
			}
			
		}

		@media only screen and (min-width: 1200px) {
			
			#about .col-L {
				align-items: flex-end;
			}
			
			#about .col-R {
				align-items: flex-start;
			}
			
			#about .col-L.wrapper {
				padding-right: 5rem;
			}
			
			#about .col-R.wrapper {
				padding-left: 5rem;
			}
		
		}
		
		@media only screen and (min-width: 1920px) {
			
			#about .col-L.wrapper {
				padding-right: 7.5rem;
			}
			
			#about .col-R.wrapper {
				padding-left: 7.5rem;
			}
			
		}
	
	.profile-img {
		border: rgb(200,200,200) 1rem solid;
		box-sizing: content-box;
		border-radius: 50%;
		max-width: 18rem;
		vertical-align: top;
		width: 90%;
	}
	
		@media only screen and (min-width: 1920px) {
			
			.profile-img {
				max-width: 20.5rem;
			}
			
		}

/**************************************************
	projects section
**************************************************/

	#projects {
		position: relative;
	}
	
	#projects::before {
		background-image: url("../images/projects-1.jpg");
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: cover;
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 1;
		position: absolute;
		z-index: -2;
	}
	
	#projects::after {
		background: rgb(30,30,30);
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.5;
		position: absolute;
		z-index: -1;
	}

	#projects .flex-col {
		align-items: center;
		flex-basis: 100%;
	}
	
		@media only screen and (max-width: 559px) {
			
			#projects .wrapper {
				padding: 5rem 3rem;
			}
			
		}
	
	#projects .text-wrapper {
		background: rgba(30,30,30,0.5);
		border-radius: 1rem;
		max-width: 46rem;
		padding: 2rem 2rem 4.5rem 2rem;
	}

		@media only screen and (min-width: 1200px) {
			
			#projects .header2 {
				text-align: center;
			}
			
		}
	
	.gallery-button {
		background: rgb(80,80,80);
		border: none;
		border-radius: 10px;
		color: rgb(255,255,255);
		display: block;
		margin: 0 auto;
		padding: 1rem 4rem;
		text-align: center;
		width: 70%;
		transition: 0.3s;
	}
	
	.gallery-button:hover {
		background: rgb(100,180,30);
		transition: 0.3s;
	}

/**************************************************
	contact section
**************************************************/

	#contact {
		background: rgb(30,30,30);
	}

	#contact .flex-col {
		align-items: center;
		flex-basis: 600px;
		flex-grow: 1;
		justify-content: center;
	}
	
		@media only screen and (max-width: 1199px) {
	
			#about .col-L.wrapper {
				padding-bottom: 0;
			}
			
		}
		
		@media only screen and (min-width: 1200px) {
			
			#contact .col-L {
				align-items: flex-end;
			}
			
			#contact .col-R {
				align-items: initial;
			}
			
			#contact .col-L.wrapper {
				padding-right: 6rem;
			}
			
			#contact .col-R.wrapper {
				padding-left: 6rem;
			}
			
			#contact .header2 {
				text-align: center;
			}
		
		}
		
		@media only screen and (min-width: 1920px) {
			
			#contact .col-L.wrapper {
				padding-right: 10rem;
			}
			
			#contact .col-R.wrapper {
				padding-left: 10rem;
			}
			
		}

	.flex-row-social {
		display: flex;
		flex-flow: row;
		justify-content: center;
	}
	
	.social-icon {
		transition: 0.3s;
		width: 6rem;
	}
	
	.social-icon:hover {
		transform: scale(1.25,1.25);
		transition: 0.3s;
	}
	
	#email .text-wrapper {
		width: 100%;
	}
	
	.input-field {
		background: rgb(30,30,30);
		border: rgba(255,255,255,0.15) 1px solid;
		border-radius: 10px;
		color: rgb(225,225,225);
		text-align: center;
		padding: 0.5rem;
		width: 100%;
	}
	
	.message-field textarea {
		background: rgb(30,30,30);
		border: rgba(255,255,255,0.15) 1px solid;
		border-radius: 10px;
		box-sizing: border-box;
		color: rgb(225,225,225);
		font-family: Seravek-Light;
		font-size: 1.8rem;
		padding: 0.5rem 1rem;
		resize: none;
		width: 100%;
	}
	
		@media only screen and (min-width: 1920px) {
			
			.message-field textarea {
				font-size: 2rem;
			}
			
		}
		
		@media only screen and (min-width: 2400px) {
			
			.message-field textarea {
				font-size: 2.2rem;
			}
			
		}
	
	input:focus, textarea:focus, select:focus, button:focus {
		outline: none;
	}
	
	.submit-button {
		background: rgb(80,80,80);
		border: none;
		border-radius: 10px;
		color: rgb(255,255,255);
		cursor: pointer;
		display: block;
		margin: 0 auto;
		padding: 1rem 4rem;
		transition: 0.3s;
	}
	
	.submit-button:hover {
		background: rgb(100,180,30);
		transition: 0.3s;
	}
	
	#success_message, #error_message {
		display: none;
	}
	
	#success_message, #error_message {
		text-align: center;
	}
	
	#error_message {
		color: rgb(190,30,45);
	}