@charset "utf-8";
/* Global Styles */

html {
	margin: 0; padding: 0;
	background-color: #FAFAFA;
}

body {
	margin: 0; padding: 0;
}

h1 {
	font-family: roboto-mono, monospace;
	font-weight: 500;
	font-style: normal;
	font-size: 14px;
	margin: 0 0 4vw 0;
	color: #000;
}

h2 {
	font-family: roboto-mono, monospace;
	font-weight: 500;
	font-style: normal;
	font-size: 14px;
	margin: 20px 0 7px 0;
	color: #333;
}

p {
	font-family: roboto-mono, monospace;
	font-weight: 300;
	font-style: normal;
	font-size: 14px;
	margin: 0 0 14px 0;
	color: #333;
}

a:link, a:visited {
	color: #000;
	text-decoration: underline;
}

a:hover {
	color: #5CDC95;
	text-decoration: underline;
}


/* Media query for Mobile devices*/
@media only screen and (min-width : 285px) and (max-width : 480px) {
	
}

/* Media Query for Tablets */
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	
}

/* Desktops and laptops  */
@media only screen and (min-width:1025px) {

	#left-bar {
		position: fixed;
		width: 20vw;
		margin: 10vw 0 0 10vw;
	}
	
		header {
		}
			header h1 a:link, a:visited {
				color: #000;
				text-decoration: none;
			}
			header h1 a:hover {
				color: #5CDC95;
				text-decoration: none;
			}
			header p a:link, a:visited {
				color: #000;
				text-decoration: underline;
			}
			header p a:hover {
				color: #5CDC95;
				text-decoration: underline;
			}

		/*
		#menu {
			margin: 14px 0 0 0;
		}
		*/

		footer {
			position: fixed;
			bottom: 0vw;
			margin-bottom: 10vw;
		}
			footer p a:link, a:visited {
				color: #000;
				text-decoration: none;
			}
			footer p a:hover {
				color: #5CDC95;
				text-decoration: none;
			}
	
	#right-bar {
		position: absolute;
		width: 55vw;
		margin: 10vw 0 0 35vw;
	}
	
		.right-bar-section {
		}
	
		.right-bar-section-2grid {
			position: relative;
		}
			.right-bar-section-2grid .image-wrapper {
				position: relative;
				width: 25.4vw;
				height: 25.4vw;
				margin: 0 4vw 4vw 0;
				float: left;
			}
				.right-bar-section-2grid .image-wrapper:nth-child(2n+2) {
					position: relative;
					width: 25.4vw;
					height: 25.4vw;
					margin: 0 0 4vw 0;
				}
						.image-hover {
							position: absolute;
							top: 0;
							left: 0;
							opacity: 0;
							transition: opacity 0.5s ease-out;
						}
						.image-hover:hover {
							opacity: 1;
						}

		.right-bar-section-3grid {
			position: relative;
		}
			.right-bar-section-3grid .image-wrapper {
				position: relative;
				width: 15.6vw;
				height: 15.6vw;
				margin: 0 4vw 4vw 0;
				float: left;
			}
				.right-bar-section-3grid .image-wrapper:nth-child(3n+3) {
					position: relative;
					width: 15.6vw;
					height: 15.6vw;
					margin: 0 0 4vw 0;
				}	
	
}