element {
	--main-blue-dark: #0F0D22;
	--main-blue-med: #36464F;
	--main-clay: #764134;
	--main-gray-dark: #424342;
	--main-gray-light: #4C504F;
	--main-white: #FDFDFF;
	--main-yellow: #FEAF16;
}

html {
	--main-blue-dark: #0F0D22;
	--main-blue-med: #36464F;
	--main-clay: #764134;
	--main-gray-dark: #424342;
	--main-gray-light: #4C504F;
	--main-white: #FDFDFF;
	--main-yellow: #FEAF16;
}

body {
	padding-top: 8vh;
	background-color: var(--main-blue-med);
}

p {
	margin-left: 10px;
	color: var(--main-white);
}

.jumbotron {
	height: 20vh;
	background-image: url(../images/CalendarCode.PNG);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top left;
	background-attachment: fixed;
	padding-top: 15%;
	padding-bottom: 0;
}

.navbar-inverse {
	background-color: var(--main-blue-med);
}

.center {
	position: absolute;
	top: 40%;
	left: 10%;
	transform: translate(-10%, -10%); 
	font-size: 40px;
	color: var(--main-yellow);
	text-shadow: black 0.1em 0.1em 0.2em ;
}

.customheader {
	font-size: 30px;
	color: var(--main-yellow);
	text-shadow: black 0.1em 0.1em 0.2em ;
}

.navbar-inverse .navbar-brand {
	color: var(--main-white);
}

.navbar-inverse .navbar-nav .nav-link {
	color: var(--main-blue-dark); /* var(--main-blue-light) */
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-nav .nav-link:hover,
.navbar-inverse .navbar-nav > li > a:focus {
	color: var(--main-yellow);
}

.navigation-header {
	padding-top: 60px;
}

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.container-fluid {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.card-set {
	padding: 0 4em 0 4em;
}

.row {
	margin-right: -15px;
	margin-left: -15px;
}

.contactme a {
	position: absolute;
	right: 2.5%;
	bottom: 5%;
	cursor: pointer;
	z-index: 999;
}

.contactme:hover {
	opacity: 0.7;
}

.image-card {
	overflow: hidden;
	border-radius: 8px;
	padding: 1px;
	border: 1px solid #021A40;
	background-color: var(--main-gray-light);
	box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.7);
}

.image-card img {
	min-width: 100%;
	height: auto;
	max-height: 100vh;
	object-fit: contain;
}

.sample-pic {
	object-fit: cover;
	overflow: hidden;
}

.githublink {
	position: absolute;
	bottom: 0;
	right: 0;
}

#datepicker-pic {
	bottom: 0;
	right: 0;
}

.contact-container {
	width: 100%;
	height: 70vh;
	margin: 0 auto;
	background: url('../images/contact-web.jpg') no-repeat center center fixed;
	/* background-size: 100% 100%; */
	object-fit: cover;
	position: relative;
}

.placeholder-text { /* Used for new sections not implemented */
	font-size: 30px;
	color: var(--main-white);
	text-shadow: black 0.1em 0.1em 0.2em ;
	text-align: center;
}

#contact-text {
	font-size: 30px;
	color: var(--main-white);
	text-shadow: black 0.1em 0.1em 0.2em ;
	position: relative;
	text-align: center;
	vertical-align: middle;
}

.contact-card-group {
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
	top: 40%;
	left: 0;
	background-color: #424342;
}

.contact-card-surround {
	background-color: #424342;
}

.contact-card {
	cursor: pointer;

}

.contact-card:hover {
	opacity: 0.7;
}

.contact-card-body {
	height: 100%;
}


/*======================================
	MEDIA QUERIES
======================================*/

@media only screen and (max-width: 768px) {
	.jumbotron {
		height: 50vh;
		background: url(../images/CalendarCode.PNG) no-repeat top left
		scroll;
	}

	.center {
		top: 10%;
	}

	.image-card {
		width: 100%;
	}

	.contact-container {
		background: url('../images/contact-web_mobile.jpg') no-repeat center center scroll;
	}
}