stylesheet.css

* {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
}

body {
	background-color: white;
	color: #5C5C5C;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:link {
	color: #2D343C;
	text-decoration: none;
}

a:visited {
	color: #2D343C;
	text-decoration: none;
}

.subheading {
	width: 100%;
	display: inline-block;
	text-align: center;
	font-size: 18px;
	margin-left: auto;
	margin-right: auto;
	color: #5C5C5C;
}

.class-project {
	text-align: center;
	font-size: 15px;
	width: 250px;
	height: 300px;
	border: 1px solid black;
}

.class-project h6 {
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 600;
}

.projects {
	margin-top: 150px;
	background-color: #F0F7FF;
	padding-bottom: 150px;
}

.projects li {
	display: inline-block;
	width: 350px;
	height: 330px;
	text-align: center;
	margin: 15px;
	background-color: white;
	box-shadow: 2px;
}

.projects ul {
	padding-top: 30px;
	text-align: center;
}

.projects i {
	padding-top: 20px;
	font-size: 40px;
	color: #2E2E2E;
}

.projects h6 {
	padding-top: 0px;
	font-size: 18px;
	font-weight: 600;	
	color: #2E2E2E;
}

.projects p {
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
}

.projects a {
	padding: 5px;
	border-radius: 2px;
}

.buttons {
	width: 100%;
	position: fixed;
	z-index: 1000;
	border: 1px solid black;
}

.nav {
	top: 0;
	padding: 10px;
	background-color: white;
	text-transform: uppercase;
	position: fixed;
	z-index: 1000;
	width: 100%;
}

.nav li {
	font-weight: 600;
}

.nav a {
	color: rgb(45, 52, 60);
}

.nav a:hover {
	color: rgba(45, 52, 60, 0.85);
}


.buttons li {
	font-size: 17px;
	display: inline;
	float: right;
	padding-left: 10px;
	padding-right: 40px;
	background-color: white;
}

#matelogo {
	height: 40px;
}

.mateimg {
	height: 650px;
}

.mateimgshift {
	height: 650px;
	margin-left: 200px;
}

.buttons li:link {
}

.opening {
	color: #2E2E2E;
	background-size: 100%;
	margin: 0;
	text-align: center;
	font-size: 80px;
	width: 100%;
	display: inline-block;
	padding-top: 20px;
	height: 100vh;
	background-color: #F0F7FF;
}

.name {
	padding-top: 135px;
	padding-bottom: 15px;
	border-bottom: 2px dashed white;
}

.blurb {
	font-size: 75px;
	display: absolute;
	padding-top: 30vh;
	padding-bottom: 20px;
}

.opening li {
	list-style-type: none;
	display: none;
}


.cindy {
	margin-top: 30vh;
	height: 250px;
	display: inline;
	margin-left: auto;
	margin-right: auto;
}

.cindy:hover {
	cursor: pointer;
}

.cindy_jump {
	height: 225px;
	width: auto;
	margin-bottom: 150px;
	margin-top: 20vh;
	display: none;
	margin-left: auto;
	margin-right: auto;
}

.cindy_jump:hover {
	cursor: pointer;
}
.cursor {
	margin-top: 30vh;
	height: 20px;
}

.cursor_jump {
	margin-top: 20vh;
	height: 20px;
	display: none;
}

hr {
	border-style: inset;
	border-width: 2px;
}

.heading {
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 3px;
	text-align: center;
	padding: 25px;
	font-size: 30px;
	padding-bottom: 0px;
	color: #2E2E2E;
}

#caption {
	margin-bottom: 50px;
	font-size: 20px;
}

.down {
	padding-top: 60px;
	padding-bottom: 20px;
	font-size: 35px;
}

.down:hover {
	cursor: pointer;
}



.about {
	padding-top: 30px;
	color: #2D343C;
}


.text {
	font-size: 30px;
	text-align: center;
	list-style-type: none;
}


.info {
	font-size: 20px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 50px;
}

.images {
	list-style-type: none;
    text-align: center;
}


.description:hover span {
	visibility: visible;
	margin: 2px;
	background-color: rgba(67, 67, 53, 0.4);
	font-size: 18px;
	color: white;
	transition: opacity 2s;

}


.images li {
	list-style-type: none;
    height: 175px;
    width: 175px;
    position: relative;
    margin: 5px;
    display: inline-block;
}

.images img {
	height: 175px;
	width: 175px;
	margin: 2px;
	display: inline-block;
}

.description {
  	color: black;
  	cursor: pointer;
  	display: table;
	height: 175px;
	left: 0;
	position: absolute;
	top: 0;
	width: 175px;
	margin: 2px;
}
.description span {
	display: table-cell;
    text-align: center;
    vertical-align: middle;
    visibility: hidden;
}

.wrap {
	height: 275px;
	width: auto;
}
ul.img-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
	margin-top: 20px;
}

ul.img-list li {
	display: inline-block;
	height: 275px;
	position: relative;
	width: auto;
	margin: 10px;
}

.classProjectsInfo {
	text-align: center;
	font-size: 20px;
	padding: 10px;
}
 
ul.img-list li:hover span.description2 {
  opacity: 1;
}
.contact {
	margin-top: 60px;
	color: #2D343C;
	background-color: white;
}

.slide-checkers, .slide-gitlet, .slide-ngordnet {
	background-color: #C4E7FF;
}

.slide-fun {
	background-color: rgba(235, 147, 136, 0.5);
}


/*Style for projects*/
.section {
	margin-top: 0px;
	margin-bottom: 0px;
}

.checkers-img {
	margin-left: 30%;
	padding: 20px;
	height: 450px;
	display: inline-block;
}

.gitlet-img, .ngordnet-img, .xchart-img {
	padding: 20px;
	margin-left: 15%;
	height: 370px;
	display: inline-block;
}

.xchart-img {
	height: 450px;
	margin-left: 20%;
}

.oh-img {
	height: 475px;
	margin-left: 25%;
}



.checkers-description, .git-ngord-description, .oh-description, .mate-description {
	margin-top: 20px;
	width: 500px;
	font-size: 20px;
	text-align: left;
}

.checkers-title i {
	margin-top: 40px;
}

.checkers-title h1, i {
	color: #2E2E2E;
	font-weight: 600;
}

.checkers-title {
	text-align: center;
	font-size: 30px;
	padding-bottom: 20px;
	padding-top: 50px;
}

.git-ngord-description, .oh-description {
	width: 350px;
	margin-right: 10%;
}

.oh-description {
	margin-left: 40px;
	margin-top: 20vh;
}

.mate-description {
	z-index: 1000;
	margin-top: 300px;
	position: relative;
	left: -150px;
}

@media (max-width: 1247px) {
	.checkers-img, .gitlet-img, .ngordnet-img, .xchart-img, .oh-img {
		display: block;
		margin: 0 auto;
	}

	.checkers-description, .git-ngord-description, .oh-description {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 90%;
	}

	.git-ngord-description ul {
		text-align: left;
		margin-left: 15%;
	}
}

.checkers-section {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.view-more {
	border: 2px solid #2D343C;
	display: inline-block;
	padding: 7px;
	margin-top: 5px;
	font-size: 15px;
}

.view-more:hover {
	color: white;
	border: 2px solid #2D343C;
}

.project-blurb, .mate-project-blurb {
	margin-top: 15px;
	font-size: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}

label {
	display: block;
	margin-top: 20px;
}

.body {
	display: block;
	margin: 0 auto;
	width: 576px;
}

form {
	margin: 0 auto;
	width: 459px;
}

input, textarea {
	width: 439px;
	height: 27px;
	padding: 10px;
	margin-top: 3px;
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    outline: none;
}

textarea {
	height: 100px;
}

#submit {
	width: 127px;
	height: 38px;
	border: none;
	margin-top: 20px;
	cursor: pointer;
}

#submit:hover {
	opacity: 0.9;
}

.foot {
	position: relative;
	top: 40px;
	width: 100%;
	text-align: center;
	font-size: 15px;
	height: 60px;
	background-color: #7CA6CF;
	color: white;
	margin-bottom: -40px;
}

.author {
	padding-top: 25px;
	text-align: center;
}

.contact-button {
	text-align: center;
	border: 1px solid black;
	border-radius: 2px;
	padding: 5px;
	display: block;
}

.back-to-top {
	text-align: center;
	font-size: 20px;
}

.btn.outline {
    background: #0099cc;
    padding: 12px 22px;
}

.contact i {
	padding-top: 20px;
	font-size: 50px;
	padding-bottom: 30px;
	margin: 5px;
}

.contact i:hover {
	opacity: .90;
}

.btn.learn-more-btn {
	background: white;
	border: 1px solid #0099cc;
	color: #0099cc;
	font-weight: 600;
}

.view-more-btn {
	margin-top: 10px;
	margin-bottom: 20px;
}

.btn.learn-more-btn:hover {
	background-color: #0099cc;
	color: white;
}

.btn-primary.outline {
    border: 2px solid #0099cc;
    color: white;
    font-weight: 600;
}

.btn-primary:hover {
	color: #0099cc;
	background: white;
}

.back-to-top {
	padding-top: 100px;
}

.back-to-top-text {
	font-size: 15px;
	font-weight: 600;
	padding-bottom: 50px;
	display: block;
}

.no-js #loader {
	 display: none;  
}

.js #loader { 
	display: block; position: absolute; left: 100px; top: 0; 
}

.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/images/loader-64x/Preloader_5.gif) center no-repeat #fff;
}

h6.for-class, h6.for-fun {
	font-size: 15px;
	color: white;
	margin-top: 40px;
	margin-bottom: 0px;
	text-align: left;
	padding-left: 10px;
	margin-right: 265px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: rgba(0, 153, 204, 0.8);
	box-shadow: 2px 2px 5px #888888;
}

h6.for-fun {
  background-color: rgba(221, 75, 57, 0.8);
}

#project-width {
	margin-left: 30px;
	margin-right: 30px;
}

.for-fun-btn {
	border: 1px solid rgba(221, 75, 57, 0.8);
	background: white;
	color: rgba(221, 75, 57, 0.8);
	font-weight: 600;
}

.for-fun-btn:hover {
	background: rgb(221, 75, 57);
	color: white;
	border: rgb(221, 75, 57);
}